wysiwyg logo The lost Mega Drop Down Menus

Nov.3.2009

Mega Drop Down Menus w/ CSS & jQuery by Sohtanaka

here's the demo

Step 1. Foundation HTML

ust like all of my navigation tutorials, start by creating an unordered list. Since we will be using CSS Sprites for our navigation states, each link within the list item should have a unique class name to it.
<ul id="topnav"> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="products">Products</a></li> <li><a href="#" class="sale">Sale</a></li> <li><a href="#" class="community">Community</a></li> <li><a href="#" class="store">Store Locator</a></li> </ul>

Step 2. Styling Foundation CSS

Since our drop down menu will be using absolute positioning, be sure to add a relative positioning to the list item. Shoot the text off of the page by specifying a text-indent of -9999px. We will then replace each navigation link with an image by specifying an image path to each link class name.
ul#topnav { margin: 0; padding: 0; float:left; width: 100%; list-style: none; font-size: 1.1em; } ul#topnav li { float: left; margin: 0; padding: 0; position: relative; /*--Important--*/ } ul#topnav li a { float: left; text-indent: -9999px; /*--Push text off of page--*/ height: 44px; } ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover State--*/ ul#topnav a.home { background: url(nav_home.png) no-repeat; width: 78px; } ul#topnav a.products { background: url(nav_products.png) no-repeat; width: 117px; } ul#topnav a.sale { background: url(nav_sale.png) no-repeat; width: 124px; } ul#topnav a.community { background: url(nav_community.png) no-repeat; width: 124px; } ul#topnav a.store { background: url(nav_store.png) no-repeat; width: 141px; }

Step 3. Creating the Mega Sub Navigation HTML

Add a class of sub right after your main navigation link and nest unordered lists within. Each nested unordered list will act as the nav columns of your mega drop down.
<ul id="topnav"> <li><a href="#" class="home">Home</a></li> <li> <a href="#" class="products">Products</a> <div class="sub"> <ul> <li><h2><a href="#">Desktop</a></h2></li> <li><a href="#">Navigation Link</a></li> <li><a href="#">Navigation Link</a></li> </ul> <ul> <li><h2><a href="#">Laptop</a></h2></li> <li><a href="#">Navigation Link</a></li> <li><a href="#">Navigation Link</a></li> </ul> <ul> <li><h2><a href="#">Accessories</a></h2></li> <li><a href="#">Navigation Link</a></li> <li><a href="#">Navigation Link</a></li> </ul> <ul> <li><h2><a href="#">Accessories</a></h2></li> <li><a href="#">Navigation Link</a></li> <li><a href="#">Navigation Link</a></li> </ul> </div> </li>

Step 4. Styling Mega Sub Navigation CSS

To get the sub nav to stick to the bottom left corner of the parent hovered nav, be sure to set an absolute position to the .sub container with the coordinate of top 44px and left 0px. For style, I added rounded corners to those browsers that support it (Firefox/Chrome/Safari). Keep in mind when having multiple levels of nested lists, you need to override its conflicting properties. Check out the comments below.
ul#topnav li .sub { position: absolute; /*--Important--*/ top: 44px; left: 0; z-index: 99999; background: #344c00 url(sub_bg.png) repeat-x; /*--Background gradient--*/ padding: 20px 20px 20px; float: left; /*--Bottom right rounded corner--*/ -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/ -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; display: none; /*--Hidden for those with js turned off--*/ } ul#topnav li .row { /*--If needed to break out into rows--*/ clear: both; float: left; width: 100%; margin-bottom: 10px; } ul#topnav li .sub ul{ list-style: none; margin: 0; padding: 0; width: 150px; float: left; } ul#topnav .sub ul li { width: 100%; /*--Override parent list item--*/ color: #fff; } ul#topnav .sub ul li h2 { /*--Sub nav heading style--*/ padding: 0; margin: 0; font-size: 1.3em; font-weight: normal; } ul#topnav .sub ul li h2 a { /*--Sub nav heading link style--*/ padding: 5px 0; background-image: none; color: #e8e000; } ul#topnav .sub ul li a { float: none; text-indent: 0; /*--Override text-indent from parent list item--*/ height: auto; /*--Override height from parent list item--*/ background: url(navlist_arrow.png) no-repeat 5px 12px; padding: 7px 5px 7px 15px; display: block; text-decoration: none; color: #fff; } ul#topnav .sub ul li a:hover { color: #ddd; background-position: 5px 12px ;/*--Override background position--*/ }

Step 5. Setting up jQuery & Hover Intent

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. Ive shared a few tricks that I have picked up along the way, you can check those out as well. Initial Step Call the jQuery file You can choose to download the file from the jQuery site, or you can use this one hosted on Google.
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
here's the demo
xnet 1998 - 2012