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:

Original tutorial


 
 


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 version

Applies to: 5.x, 6.0


Share this article on   LinkedIn Google+

Ondrej Vasil

I'm a Technical Leader of the Web Development teamin Kentico Software. I'm going to write articles connected with a real life development using Kentico.

Comments

Roberto Gonzalez Jr commented on

Hello All,
I was able to implement this menu in Version 8 by using the example but I am having some slight trouble with the transformations. Has someone been able to correctly format the links so that the top level menu item has the proper class and children are not placed in divs with column "col1" widths. Below is the code I have been working with. My version is slightly different I am using
Mega Menu style "col_one_quarter". It was a modification made but same logic that was posted in the example.

Top Level Code Below

<li class="menuitem_fullwidth"><a href="<%# GetDocumentUrl() %>" <asp:Literal ID="ltlChildClass" runat="server" Visible="false" Text='class="menuitem_drop menu_title"' /> ><%# 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_fullwidth", 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>


Sub Menu Code

<div class="<%# IfEmpty(Eval("DocumentMenuClass"), "col_one_quarter", 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>


Currently my menu structure is :

<li class="menuitem_fullwidth">
<a class="menuitem_drop menu_title" href="/example.aspx"></a>
<div class=" dropdown_fullwidth ">
<div class="col_one_quarter">
<a href="example.aspx"></a>
</div>
<div class="col_one_quarter">
<a href="example.aspx"></a>
</div>
<div class="col_one_quarter">
<a href="example.aspx"></a>
</div>
<div class="col_one_quarter">
<a href="example.aspx"></a>
</div>
<div class="col_one_quarter">
<a href="example.aspx"></a>
</div>


I need it to look like this:

<li class="menuitem_fullwidth">
<a class="menuitem_drop menu_title" href="/example.aspx"></a>
<div class=" dropdown_fullwidth ">
<div class="col_one_quarter">
<ul>
<li>
<a href="example.aspx"></a>
</li>
<li>
<a href="example.aspx"></a>
</li>
<li>
<a href="example.aspx"></a>
</li>
<li>
<a href="example.aspx"></a>
</li>
</ul>
</div>

kentico_ondrejv commented on

Hi Aditya,

having your complex request in mind, I would recommend you using Hierarchical Repeater - which is nicely described here: http://devnet.kentico.com/articles/creating-a-mega-menu-using-hierarchical-transformations or here: http://devnet.kentico.com/articles/implementing-multi-level-responsive-navigation-using-a-hierarchical-transformation

This basically allows you define necessary conditions within inner transformation, separately for each level and page type.

Hope it meets your needs

Aditya commented on

@Ondrej Vasil ,
i have a site with 2 level of menu , by default . Main menu and it's sub menu, but i want level 3 menu, means sub-menu also having it's own sub menu, level 3 menu. Can you help me out on this how can i transform the site menu and how i select which menu is in main menu, sub-menu or sub-sub-menu.
it's kinda urgent so please help me out ASAP

kentico_ondrejv commented on

Hi Oscar,

It's been quite a long time :-), but the point was copying the whole CSS code (not just snippets) at the very bottom of the following article: http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

By the way, I would recommend taking a look at the article in my previous comment which points to new, recommended way of creating content of the Mega menu (using hierarchical transformations) - the same approach works also in Kentico 8.

Cheers

Oscar commented on

What do you mean with (THE FINAL ONE) ?
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).

kentico_ondrejv commented on

A really nice article about creating the same Mega Menu in Kentico 7:
http://devnet.kentico.com/articles/creating-a-mega-menu-using-hierarchical-transformations