EverWeb Codebox

Mega Drop Down Menu

Mega Drop - or Mega Confusion?

A drop down navigation with three or more levels usually confuses visitors more than it helps them. This style of mega menu allows clearer navigation around larger websites.

Using columns, the pages of two or more directories can be listed in one drop down. This menu will allow up to 5 columns per drop down which will be useful for multi product listings.

Both the styles and the HTML are shown below. A knowledge of CSS selectors and how to modify them is necessary. It helps to understand the HTML layout of nested lists to figure out what goes where.

The CSS is pasted into the Site Wide Head Code box in the Site Publishing Settings page and the HTML is pasted into an HTML snippet on the master page and Command dragged into the header.

NOTE [1]: The menu will have to be brought to the front using the Arrange menu before publishing each page.

NOTE [2]: The menu items to the right have their sub menu opening to the left so that they don't spread into the browser background.

These are floated to the right so the first one in the list in the HTML will be to the furthest to the right in the actual menu.

To get your head around this requires an understanding of the nature of CSS positioning using floats.

CSS

HTML

<style type="text/css">

#megaMenu {

    list-style:none;

    width:940px;

    margin:0 auto;

    height:43px;

    padding:0 10px;    

    -moz-border-radius: 7px;

    -webkit-border-radius: 7px;

    border-radius: 7px;     

    background: #444444;  

    background: -webkit-linear-gradient(top, #888888 0%,#000000 100%);

    background: -moz-linear-gradient(top, #888888 0%,#000000 100%);

    background: linear-gradient(top, #888888 0%, #000000 100%);}

#megaMenu li {

    float:left;

    text-align:center;

    position:relative;

    padding: 4px 10px 4px 10px;

    margin-right:30px;

    margin-top:7px;

    border:none;}

#megaMenu li:hover {

    border: 1px solid #000;

    padding: 4px 9px 4px 9px;    

    background: #EEEEEE;     

    -moz-border-radius: 5px 5px 0px 0px;

    -webkit-border-radius: 5px 5px 0px 0px;

    border-radius: 5px 5px 0px 0px;}

#megaMenu li a {

    font-family:Verdana, Helvetica, sans-serif;

    font-size:15px;

    color: #FFF;

    display:block;

    outline:0;

    text-decoration:none;}

#megaMenu li:hover a {color:#161616}

/* Drop Down */

.dropdown_1column,

.dropdown_2columns,

.dropdown_3columns,

.dropdown_4columns,

.dropdown_5columns {

    margin:4px auto;

    float:left;

    position:absolute;

    left:-999em;

    text-align:left;

    padding:10px 5px 10px 5px;

    border:1px solid #000;

    border-top:none;

    background:#FEFEFE;

    -moz-border-radius: 0px 5px 5px 5px;

    -webkit-border-radius: 0px 5px 5px 5px;

    border-radius: 0px 5px 5px 5px;}

.dropdown_1column {width: 140px;}

.dropdown_2columns {width: 280px;}

.dropdown_3columns {width: 420px;}

.dropdown_4columns {width: 560px;}

.dropdown_5columns {width: 700px;}

#megaMenu li:hover .dropdown_1column,

#megaMenu li:hover .dropdown_2columns,

#megaMenu li:hover .dropdown_3columns,

#megaMenu li:hover .dropdown_4columns,

#megaMenu li:hover .dropdown_5columns {left:-1px;top:auto}

/* Columns */

.col_1, .col_2, .col_3, .col_4, .col_5 {display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;}

.col_1 {width:130px;}

.col_2 {width:270px;}

.col_3 {width:410px;}

.col_4 {width:550px;}

.col_5 {width:690px;}

/* Right alignment */

#megaMenu .menu_right {float:right;margin-right:0px;}

#megaMenu li .align_right {

    /* Rounded Corners */

    -moz-border-radius: 5px 0px 5px 5px;

    -webkit-border-radius: 5px 0px 5px 5px;

    border-radius: 5px 0px 5px 5px;}

#megaMenu li:hover .align_right {left:auto;right:-1px;top:auto;}

/* Drop Down Content */

#megaMenu p, #megaMenu h2, #megaMenu h3, #megaMenu ul li {

    font-family:Trebuchet MS, Helvetica, sans-serif;

    line-height:20px;

    text-align:left;}

#megaMenu h2{

font-size:18px;color:#000000;

font-weight:normal;margin:0;padding-bottom:5px;}

#megaMenu h3 {

font-size:16px;color:#000000;

text-decoration:underline;margin:0;padding-bottom:7px;}

#megaMenu p {font-size:15px;color:#000000;

line-height:18px;margin:0;padding:5px 0;}

#megaMenu li:hover div a {font-size:14px;color:#0000FF;}

#megaMenu li:hover div a:hover {color:#FF0000;}

#megaMenu li ul {list-style:none;padding:0;margin:0;}

#megaMenu li ul li {

    font-size:12px;

    line-height:24px;

    position:relative;

    padding:0;

    margin:0;

    float:none;

    text-align:left;

    width:130px;}

#megaMenu li ul li:hover {background:none;border:none;padding:0;margin:0;}

</style>

<!-- Begin Menu -->

<ul id="megaMenu">

<li><a href="#" class="drop">Introduction</a><!-- Begin Home Item -->

<div class="dropdown_2columns"><!-- Begin 2 columns container -->

<div class="col_2"><h3>Mega Menu</h3></div>

<div class="col_2">

<p>This is an example of a drop down mega navigation menu.</p>            

<p>The drop downs can be styled in one through five columns wide</p>

<p>Main menu items can be floated right with the drop down opening to the left to keep it inside the the page content area.</p>            

</div>

</div><!-- End 2 columns container -->

</li><!-- End Home Item -->

<li><a href="#" class="drop">Three Columns</a><!-- Begin 3 columns Item -->

<div class="dropdown_3columns"><!-- Begin 3 columns container -->

<div class="col_3"><h2>HTML5 Widget Categories</h2>

<p>Three Columns of links with subject heading...</p></div>

<div class="col_1">

<h3>Layout</h3>

<ul>

   <li><a href="#">Article</a></li>

   <li><a href="#">Section</a></li>

   <li><a href="#">Aside</a></li>

   <li><a href="#">Details</a></li>

   <li><a href="#">Fieldset</a></li>

</ul>  

</div>

<div class="col_1">

<h3>Images</h3>

<ul>

   <li><a href="#">Figure</a></li>

   <li><a href="#">Figcaption</a></li>

   <li><a href="#">Text Wrap</a></li>

   <li><a href="#">Relative Captions</a></li>

   <li><a href="#">Inline Captions</a></li>

</ul>  

</div>

<div class="col_1">

<h3>Media</h3>

<ul>

   <li><a href="#">Audio</a></li>

   <li><a href="#">Video</a></li>

   <li><a href="#">Slider & Captions</a></li>

   <li><a href="#">Audio &Title</a></li>

   <li><a href="#">Video &Title</a></li>

</ul>  

</div>

</div><!-- End 3 columns container -->

</li><!-- End 3 columns Item -->

<!-- Begin 1 column Item -->

<li class="menu_right"><a href="#" class="drop">Single Column</a>

<div class="dropdown_1column align_right">

<div class="col_1">

<ul class="simple">

   <li><a href="#">Contact</a></li>

   <li><a href="#">Info</a></li>

   <li><a href="#">Relative File Paths</a></li>

   <li><a href="#">Using HTML Characters</a></li>

</ul>  

</div>

</div>

</li><!-- End 1 column Item -->

<!-- Begin  2 columns Item -->

<li class="menu_right"><a href="#" class="drop">Two Columns</a>

<!-- Begin  2 columns container -->    

<div class="dropdown_2columns align_right">

<div class="col_1">

<h3>Layout</h3>

<ul>

   <li><a href="#">Article</a></li>

   <li><a href="#">Section</a></li>

   <li><a href="#">Aside</a></li>

   <li><a href="#">Details</a></li>

   <li><a href="#">Fieldset</a></li>

</ul>  

</div>

<div class="col_1">

<h3>Images</h3>

<ul>

   <li><a href="#">Figure</a></li>

   <li><a href="#">Figcaption</a></li>

   <li><a href="#">Text Wrap</a></li>

   <li><a href="#">Relative Captions</a></li>

   <li><a href="#">Inline Captions</a></li>

</ul>  

</div>

</div><!-- End 2 columns container -->

</li><!-- End 2 columns Item -->

</ul><!-- End Menu -->

Javascript

When viewed on a tablet such as an iPad, hover drop down menus don't play nice since they open with a click and refuse to close until the page is refreshed.

To over come this, download the doubleTapToGo file and drag it into Assets.

Now insert the following into the Site Wide Head Code box...

<script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/doubletaptogo.min.js"></script>

<script type="text/javascript">

$( function(){$( '#megaMenu li:has(ul)' ).doubleTapToGo();});

</script>

Open a page in the iOS Simulator, or the real thing, tap to open a dropdown and then tap anywhere else to close it.

NOTE: The mega menu on this page will NOT behave correctly on iPad due to the presence of the EverWeb default navigation.

The HTML5 section of the EverWeb Codebox site has a mega menu which will work properly. Click the HTML5 tab of the sub navigation at the top right of this page to see it in action.