Styling Mega Menus

Adding a Mega Menu to your style

At this point it is assumed that you have already –

1. Assigned the correct user privileges to allow you to add a Mega Menu
2. Created a Mega Menu and set it to be 'Active'
   
3. Defined the panels you wish to appear in your Mega Menu, and added the required elements to each panel 
   
4. Added the panels to the Mega Menu 
   
   

Once this has been done, the code snippet, or GUID, that generates the Mega Menu needs to be added to the style. This can be found by going to Administration > Modules > Mega Menus.  The GUID should be copied from here and pasted into the style's default.aspx file at the point where the Mega Menu is required to appear on the page.

Styling the Mega Menu

Adding the GUID to the style will generate html code for the Mega Menu following this structure:

<div class="sel mega-menu selected-root">
    <div class="sel-o">
        <div class="cls sel-i">
            <ul class="tabs">
                <li class="first menu-tab mt-alpha">
                    <a class="mt-panel-title" href="/about-us/">
                        <span class="text">About</span>
                    </a>
                    <ul class="panels"> 
                </li>
                <li class="menu-tab mt-beta">
                <li class="menu-tab mt-gamma">
                <li class="menu-tab mt-delta">
                <li class="last menu-tab mt-epsilon">
            </ul>
        </div>
    </div>
</div>

There are three containing divs for your navigation, with the class names "sel"/"mega-menu"/"selected-root" , "sel-o" and "sel-i".  Generally they will contain any background images/colours that need to apply to the navigation as a whole, as well as any margin and padding to fit the navigation into your design.

Inside the containing divs is a list (class name="tabs") containing each top level link or panel title, and nested inside each of the panel titles that contains some content is another list (class name="panels"), which contains the code for the content in the dropdown (highlighted in bold above).

To start with, we will use a basic example and suppose that each of the dropdown menus simply contain a paragraph of text inside a content editor.  We will then have the following code appearing inside each of the list items in place of the bold text above:

 <ul class="panels">
    <li class="menu-tab-panel">
        <div class="mt-panel-o">
            <div class="cls mt-panel-i">
                <div class="ContentEditor">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet egestas nisi, et euismod lorem vehicula eu. Duis non purus quis nibh adipiscing molestie quis non sem. Donec fringilla elit at imperdiet vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet leo felis. Morbi ac dolor quis arcu fringilla varius. Integer mollis consequat nisi, vel viverra eros. Suspendisse ut ultrices lectus.</p>
                </div>
            </div>
        </div>
    </li>
</ul>

If we assume that each panel in the menu contains an identical content editor and text, the following unstyled Mega Menu will be shown on the page:

The first thing to do is to remove the margin, padding and bullet points from all the lists in the menu:

.mega-menu ul, .mega-menu li { list-style-type: none; margin: 0; padding: 0; background: none; }

We can also add some basic styling to the dropdown menus:

.mega-menu li.menu-tab ul.panels { background: #f7f7f7; width: 400px; border: 3px solid #662d91; clear: both; display: block; padding: 10px 15px; color: #555; }

Note that we have used the li class "menu-tab" to target all of the dropdown panels. if required, we could target each dropdown individually using the "mt-alpha", "mt-beta", etc class names, for example:

.mega-menu li.mt-gamma ul.panels { width: 500px; } 

Now we'll add some styling to the top-level links:

a.mt-panel-title:link, a.mt-panel-title:visited { display: block; text-decoration: none; }
a.mt-panel-title .text { display: block; padding: 10px 24px; cursor: pointer; color: #00A0DE; }

a.mt-panel-title:hover, a.mt-panel-title:active { color: #fff; background: #00A0DE; border-radius: 3px 3px 0 0; }
a.mt-panel-title:hover .text, a.mt-panel-title:active .text { color: #fff; }

The menu will now look like this:

Adding this css property to the dropdowns will hide them off-screen initially:

And this will make sure the relevant dropdown is revealed when the associated top-level link is moused-over:

When the user navigates to a page from the menu, the relevant list item in the code is given the class name "selected".  For example, if the Resources link in the menu above is clicked on, the code becomes:

<div class="sel mega-menu selected-root">
    <div class="sel-o">
        <div class="cls sel-i">
            <ul class="tabs">
                <li class="first menu-tab mt-alpha"></li>
                <li class="menu-tab mt-beta">
                <li class="menu-tab mt-gamma selected">
                <li class="menu-tab mt-delta">
                <li class="last menu-tab mt-epsilon">
            </ul>
        </div>
    </div>
</div>

This enables us to apply styling for 'held tab' states, where the current section of the site is highlighted in the menu.  If we wanted to give the link for the current section the same styling as when any of the links are moused over, we could use the following css:

.mega-menu li.selected a.mt-panel-title:link, .mega-menu li.selected a.mt-panel-title:visited { color: #fff; background: #00A0DE; border-radius: 3px 3px 0 0; }
.mega-menu li.selected a.mt-panel-title .text { color: #fff; }

At this stage, the menu is now fully functional.  However, the menu in the example above is very simple and contains only a single content editor in each dropdown.  We can add many other elements to the dropdowns if we wish, the most common examples being: pagelisters with dynamically changing content, possibly with thumbnail images; image assets which may be linked to a specific page; and columns to define the layout.  To target a pagelister inside a mega menu we could do something like this:

.mega-menu .oPageListerContainerOuter { color: #000; }

In fact we can target the dropdowns individually, as mentioned above, to apply different styling to similar elements in different dropdowns:

.mega-menu li.mt-alpha .oPageListerContainerOuter { color: #000; }
.mega-menu li.mt-beta .oPageListerContainerOuter { color: #fff; } 

Mega menus can be used to create an impressive and rich top navigation, and are flexible enough to allow for the styling to recreate most designs.  However, it should be remembered that every element that is added into every dropdown menu is loaded at the moment the page loads, even though it is not initially visible on screen.  Care should be taken to ensure that too much content is not placed inside the mega menus, which could slow down page loading times.