Creating a Mega Menu (step by step)
In this article you’ll see how to integrate a Mega Menu. There are plenty of solutions for complex looking menus with images, link descriptions etc. all over the internet. They are using Javascript, CSS or combination of those two. In this example, we’ll integrate the following Mega Menu solution which is completely CSS driven (which is great from the Accessibility and a bit the SEO point of view):
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
Please note: The following URL contain the preferred method of creating a Mega Menu -
Creating a Mega Menu using Hierarchical transformations
Despite the fact that the CSS List Menu web part is a perfect thing when it comes to relatively simple menu layout (including dropdown), it has its limitations with building complex drop-down menus. This is because it generates an unordered list of menu items which can’t be amended in any nice way (parsing of the RenderedHTML property is not so user friendly way). Therefore, we’ll take advantage of Nested control in the transformation which give us ability to define our own HTML layout (just according to our needs).
In order to integrate the above mentioned Mega Menu which will be dynamic enough (not just defined as a static HTML in the Static HTML web part), follow the steps below. Please note, this example is done on the
Corporate Site sample site in order to have some dummy document structure. Of course, you can try to develop this menu directly on your site.
1. Add the Repeater web part to the page you want to show your navigation on.
Please use the following settings:
Main repeater
Path: /%
Document types: CMS.MenuItem
Maximum nesting level: 1
ORDER BY expression: NodeLevel, NodeOrder, NodeName
Select top N documents: 6 (it’s up to you)
WHERE condition: DocumentMenuItemHideInNavigation='false'
Transformation: CMS.MenuItem.MegaMenuTopLevel
Nested controls ID: repSubItems
Content before: <ul id="menu">
Content after: </ul>
2. The
CMS.MenuItem.MegaMenuTopLevel transformation looks like as follows and it is needed to be defined in
CMS Site Manager -> Development -> Document types -> Edit (Page(Menu Item) -> Transformations):
<li><a href="<%# GetDocumentUrl() %>" <asp:Literal ID="ltlChildClass" runat="server" Visible="false" Text='class="drop"' /> ><%# Eval("DocumentName")%></a>
<asp:Literal ID="ltlContentBeforeDivStart" runat="server" Visible="false" Text='<div class="' />
<asp:Literal ID="ltlContentBefore" runat="server" Visible="false" Text='<%# IfEmpty(Eval("DocumentMenuClass"), "dropdown_1column", Eval("DocumentMenuClass"))%>' />
<asp:Literal ID="ltlContentBeforeDivEnd" runat="server" Visible="false" Text='">' />
<cms:CMSRepeater ID="repSubItems" Path='<%# Eval("NodeAliasPath") + "/%" %>' runat="server" ClassNames="CMS.MenuItem" TransformationName="CMS.MenuItem.MegaMenuSub" OrderBy="NodeLevel, NodeOrder, NodeName" MaxRelativeLevel="1" WhereCondition="DocumentMenuItemHideInNavigation='false'" />
<asp:Literal ID="ltlContentAfter" runat="server" Visible="false" Text="</div>" />
<script runat="server">
protected void Page_PreRender(object sender, EventArgs e)
{
if (repSubItems.Items.Count != 0)
{
ltlContentBeforeDivStart.Visible = true;
ltlContentBefore.Visible = true;
ltlContentBeforeDivEnd.Visible = true;
ltlContentAfter.Visible = true;
ltlChildClass.Visible = true;
}
repSubItems.ReloadData(true);
}
</script>
3. Define
MegaMenuSub transformation:
<div class="<%# IfEmpty(Eval("DocumentMenuClass"), "col_1", Eval("DocumentMenuClass"))%>">
<%# IfEmpty(Eval("MenuItemTeaserImage"), "", "<img src='" +GetFileUrl("MenuItemTeaserImage") + "?maxsidesize=20' style='margin: 0 5px 0 0; float: left;' />") %>
<a href="<%# GetDocumentUrl() %>"><%# Eval("DocumentName")%></a>
</div>
4. CSS - Use the exact CSS styles definition as in the source article (the final one). This one can be placed to your main CSS stylesheet (CMS Site Manager -> Development -> CSS stylesheets).
5. Copy the images from the source package to the chosen location, in this example use the ~\App_Themes\CorporateSite\Images\megamenu folder.
Afterwards, don’t forget to change this path in the CSS stylesheet by replacing the following pre-existing path (img/drop.png) with the new one:
#menu li .drop
{
padding-right:21px;
background:url("~/App_Themes/CorporateSite/Images/megamenu/drop.png ") no-repeat right 8px;
}
#menu li:hover .drop
{
background:url("~/App_Themes/CorporateSite/Images/megamenu/drop.png ") no-repeat right 7px;
}
6. Now, we are ready to define particular CSS classes for menu items. By default, the CSS stylesheet counts with the following 5 classes for the main level items. They tell how wide should the dropdown list be.
dropdown_1column, dropdown_2columns, dropdown_3columns, dropdown_4columns, dropdown_5columns
The second level items use CSS classes as follows (to set particular item width = how many columns will be the item outstreached for):
col_1, col_2, col_3, col_4, col_5
Both level CSS classes can be inserted into the Menu item CSS class property as shown in the screenshot below:
7. Now, it’s really up to you, how you define the menu’s look and feel. According to the transformation you use, you can for instance upload some
Menu Item teaser image(on the Form tab) and your image could be shown as an item icon.
It can contain additional titles, headings, images, graphics and anything you want, since it is totally adjustable via the transformation(s).
In the end, it can look like this and even better:
See also: Again, the credits go to this source article:
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
The Knowledge Base article with the code in MS Word:
MS Word versionApplies to: 5.x, 6.0