Mega Drop Down Menus w/ CSS & jQuery

Blog » CSS/XHTML » Mega Drop Down Menus w/ CSS & jQuery

Mega Drop Down Menus w/ CSS & jQuery

November 3rd, 2009

While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.

According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites. I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other. – Jakob Nielsen – Alert Box

As I read his article he recommended that these kind of drop down menus should have a subtle time delay when hovering in and out of them. I decided to use the Hover Intent jQuery plugin to help me achieve this effect.

View Demo

Step 1. Foundation – HTML

Just 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.
Mega Drop Down Menu


<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>
    <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 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;
	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. I’ve 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="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

After calling the jQuery file, visit and download the latest Hover Intent jQuery Plugin. Save the file to your current directory, and call the file.

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>

Step 6. Launching Code on Document Ready

Directly after the line where you called your jQuery and hover intent file, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
	//Code goes here
});

Step 7. Set Hover Over & Hover Out Events – jQuery

Note: When using the hover intent plugin, it requires each hover over and hover out state to be in its own function.

The Logic

When a drop down parent link is hovered over:

Find .sub and fade it in (By default, we will fade the opacity down to 0)
Check if a .row exists (in case you want more than one row in the drop down)
If .row does exists, find the widest row and set the width of the .sub container.
If .row does not exist, set the width of the .sub container.

On hover out:

Find .sub and fade it out (Opacity 0)
Hide .sub (Display none – so it is completely out of the way)

The following script contains comments explaining which jQuery actions are being performed.

//On Hover Over
function megaHoverOver(){
    $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
    (function($) {
        //Function to calculate total width of all ul's
        jQuery.fn.calcSubWidth = function() {
            rowWidth = 0;
            //Calculate row
            $(this).find("ul").each(function() { //for each ul...
                rowWidth += $(this).width(); //Add each ul's width together
            });
        };
    })(jQuery); 

    if ( $(this).find(".row").length > 0 ) { //If row exists...

        var biggestRow = 0;	

        $(this).find(".row").each(function() {	//for each row...
            $(this).calcSubWidth(); //Call function to calculate width of all ul's
            //Find biggest row
            if(rowWidth > biggestRow) {
                biggestRow = rowWidth;
            }
        });

        $(this).find(".sub").css({'width' :biggestRow}); //Set width
        $(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin

    } else { //If row does not exist...

        $(this).calcSubWidth();  //Call function to calculate width of all ul's
        $(this).find(".sub").css({'width' : rowWidth}); //Set Width

    }
}
//On Hover Out
function megaHoverOut(){
  $(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
      $(this).hide();  //after fading, hide it
  });
}

Step 8. Set Custom Configurations & Trigger Function

Now that we declared the hover over and hover out function in the above step, its now time to set the custom configurations and call the hover intent function.

//Set custom configurations
var config = {
     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
     interval: 100, // number = milliseconds for onMouseOver polling interval
     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
     timeout: 500, // number = milliseconds delay before onMouseOut
     out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
$("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configurations

For more detailed explanation of how hover intent works, check out their website.

Conclusion

Keep in mind that this script calculates the width of your .sub container (adding up all UL’s per row) and automatically adjusts it. If you would like to specify your own custom width, you can delete that portion of the code and specify a static width in your CSS. This all depends on what you are trying to add in your mega drop down, and each scenario may be different. I hope you grasped the basic concepts of this tutorial so you can make your own custom mega drop down for future projects. If you have any questions, concerns, or suggestions, please let me know!

View Demo

Inspiration Elsewhere

Now that you know how to create a mega drop down from scratch, check out some of these sites for inspiration.

120 Responses to “Mega Drop Down Menus w/ CSS & jQuery”

Nov 3rd, 2009 @ 1:51 am Marco

Looks very slick – well done mate. With CSS3 you could even make “columns” instead of having three different lists. Still, this is a great example which could be used in loads of websites.

Keep up the great work!
Nov 3rd, 2009 @ 2:05 am Janko

Awesome tutorial and really impressive demo. Great work, Soh!
Nov 3rd, 2009 @ 2:08 am saurabh shah

nice menu … was looking something like this only and got .. thanks for sharing it !
Nov 3rd, 2009 @ 2:23 am nana

Hmm… I cant see the drop down in the demo…only me?
Using Chrome here..
Nov 3rd, 2009 @ 3:49 am nomi

wow …. dude you rock. excellent tutorial. thanks.
Nov 3rd, 2009 @ 4:44 am James

Excellent tutorial Soh! Clear and concise and I’ll be using this on future projects
Nov 3rd, 2009 @ 6:28 am Mauricio Rivera

Great tutorial! … I’ll keep it in mind if I ever need a fatty menu like this, surely I will.
Nov 3rd, 2009 @ 6:37 am Robin B.

Nice solution, thanks
Nov 3rd, 2009 @ 7:38 am Aaron

EXACTLY what I was looking for! Thanks, this helps a bunch!
Nov 3rd, 2009 @ 8:36 am designfollow

thanks for the great tutorial.
Nov 3rd, 2009 @ 9:37 am Rocco

Damn ninjas… Nice job, btw.
Nov 3rd, 2009 @ 10:43 am Jad Limcaco

Very nice Soh! I have never tried something like this before, and I will definitely refer back to this on my next website that needs a big, fat, overweight dropdown menu.
Nov 3rd, 2009 @ 10:44 am Terry

Great work! Thanks for sharing.
Nov 3rd, 2009 @ 1:00 pm CIDIC

what about browser compatibility will it work with anything?
Nov 3rd, 2009 @ 7:06 pm veeru

It’s really impressive work. Thank you for sharing.
Nov 3rd, 2009 @ 7:50 pm Ackrock

Love the tutorial, unfortunately i’ve had little success following any tutorials on this issue, i would love (and im sure others would too) if you can do a video tutorial on this subject i’ve searched the web up and down and haven’t found 1 video tutorial on this subject. Thanks Man.
Nov 3rd, 2009 @ 10:30 pm Sean Curtis

Seems to work ok in most modern browsers (didn’t check IE6) – but why on earth didn’t you make it keyboard accessible? I can’t even tab through the menu at all…
Nov 3rd, 2009 @ 11:33 pm izulcybercafe

Nice tutorial..

Thanks…..
Nov 4th, 2009 @ 1:49 am Manny

Well done, this is a great tutorial and IT WORKS GREAT IN IE6! to make round corners in IE6 i’ve had great success with this: http://www.dillerdesign.com/experiment/DD_roundies/ works a treat.

M [".][",]
Nov 4th, 2009 @ 6:11 am Tim Taylor

I would have a concern about the use of any dropdown menu used in IE6 when it comes to the menu flyout expanding over a select form element. Have you factored in bgiFrame jquery plugin into your code as well?
Nov 4th, 2009 @ 6:52 am Pat

That is exactly what I was looking for. Thanks a lot!
Nov 4th, 2009 @ 6:57 am Jauhari

Excellent and easy to try..
Nov 4th, 2009 @ 9:26 pm mupet

Great tutorials, impresive work
Nov 5th, 2009 @ 12:12 am James

Soh, the tutorial is amazing. I was looking for something like that. In future can you make a tutorial on suckerfish menu with animation?

Thanks
Nov 5th, 2009 @ 4:20 am Jacob

sweet
Nov 5th, 2009 @ 5:06 am Rilwis

Good article. I love the way you organize HTML codes. It’s simple and meaningful. I bookmark this for a good reference. Thank you.
Nov 5th, 2009 @ 5:28 am Alex Flueras

Thanks so much! I was looking for weeks for an actual tutorial on MegaMenus. Great article!
Nov 5th, 2009 @ 6:30 am michael

any chance of you making this 508 compliant?
Nov 6th, 2009 @ 2:33 am mini

Very good tutoiral! Can someome tell me for which browsers is used -khtml-border-radius ?
Nov 6th, 2009 @ 4:25 am Silverboy

how much I’ve been looking for something like this…..thanks
Nov 7th, 2009 @ 12:12 am Nadja Design

Wow those menus are awesome, have been looking for something like this for ages!
Nov 7th, 2009 @ 7:44 am Rochelle Dancel

Oh, wow – thank you for sharing this! Have bookmarked for future use…
Nov 7th, 2009 @ 7:48 am CMS Themes

Wow, a great written tutorial mate. I will sure need this drop down menu on upcoming projects.

Thanks
Nov 7th, 2009 @ 7:49 am Five Technology

This is perfect for a few e-commerce projects we have coming up. Great post. Thanks.
Nov 7th, 2009 @ 8:08 am Ali Suarez

Really useful! Thanks a lot!
Nov 7th, 2009 @ 8:12 am Placehold

Thanks dude, Yet another killer tuts,

Keep up the great work

Regards

Craig
Nov 7th, 2009 @ 10:14 am Lam Nguyen

That’s sad when seeing this post in this blog because I planned to write a post about this one. However, I’m very impressed by the awesome tutorial by you. Thanks for your great post
Nov 7th, 2009 @ 10:01 pm Tutorials

I found your site on a tutorial directory. We recently launched tutorialgrad.com. It’s similar to those other tutorial sites only easier for you. All you have to do is submit your RSS Feed once, we do the rest. We will check your feed for tutorials and post them daily, all with direct links to your site (we don’t frame your content). If you are interested please check it out and let us know what you think.
Nov 8th, 2009 @ 6:34 am Gregor

hey, nicely done!
But for what do you need do you need the jQuery?
All that I see in the demo can be done with CSS only these days (as long as you do not need to support IE 6 of course). Even the transitions.

Good work anyway, and the people love it, you got featured by SM, congrats!
Nov 9th, 2009 @ 5:58 am Nick

Great tutorial! Love the big drop downs…
Nov 11th, 2009 @ 9:43 am Rahul - Web Guru

Very interesting drop down, which is being used quite widely these days in many popular websites too.
Nov 11th, 2009 @ 10:57 am theComplex

Quite awesome, thank you for posting this!
Nov 12th, 2009 @ 6:36 am share

function is possible to “active” in this menu? if so you could give some examples? or answer me please, greetings and thanks.
Nov 12th, 2009 @ 9:48 am Matt Propst

Great article. I’m a huge fan of the tutorial (i’ve bookmarked the page) but was was hesitant of using the concept until i got down to the “real world examples” Ok, i’m sold. Now i just need a project to use the Mega Drop-Down on

Thanks!
-Matt
Nov 12th, 2009 @ 9:41 pm chandrakanta

Boss. you are great. I am having 2 years of exp. in PHP and I like your tutorial. this is what I need. Cheers .
Nov 13th, 2009 @ 4:19 am Anne

Great tutorial, thanks.
I also liked the green header very much. Wat did you use to make the word “DROPDOWNS”?
Nov 13th, 2009 @ 12:51 pm montana Flynn

Excellent timing on this one Soh, a client specifically requested a mega menu!
Nov 18th, 2009 @ 2:26 am Hung Bui

Very nice tutorial and quit useful.
In my opinion, I would change the hover effect a bit that when hover to other tab the existing mega drop down hide it immediately and show a new one. However, when user move the mouse out of mega dropdown then you can have a subtle time delay.
Nov 18th, 2009 @ 5:52 am Anderson

Fantástico!
Nov 18th, 2009 @ 6:46 am Jim

Thanks for the tutorial! Will be using this in conjunction with a redesign of our business website shortly!

Cheers!
Nov 18th, 2009 @ 12:56 pm matt

Great summary! Just in time for our meganav implementation. Kind of crazy how much influence Nielsen has. Seriously though, this would have been a good article even without the resizing portion of the script, but it’s always nice to throw in something a little extra.

In my laziness I did not realize you could call multiple sets of configurations for hoverIntent. No decent dropdown menu should be without it imo.
Nov 19th, 2009 @ 1:50 am George

Fantastic demo – seems to have stopped working in IE though – might be me, but could someone check? )
Nov 19th, 2009 @ 8:08 am Mickaël

Ce blog est décidément une véritable mine d’or !
Merci pour le tuto !
Nov 19th, 2009 @ 8:38 am WPSMASH.COM

Thank you for this great tutorial!
Nov 20th, 2009 @ 3:06 am Nuramon

Very nice Tutorial!

Please note, when using the code from this site, the line:
rowWidth = $(this).width();
…should increment the widths:
rowWidth += $(this).width();

In the demo it’s correct and working.
Nov 20th, 2009 @ 7:16 am Eric

Thank you for the great tutoiral and working example! I am trying get the megamenu to display on top of some other elements on my page and having trouble figuring out the z-index levels. Anybody else having issues with the menu being displayed behind other elements on your page.
Nov 20th, 2009 @ 9:34 am Gabby

Nuramon I LOVE YOU!!!
I have been trying to wrap my brain around what I could have done wrong or where the slight difference could be as my uls were just one big list no matter what I did.
Next time you’re in Edmonton, Canada I will buy you a drink
Nov 20th, 2009 @ 3:26 pm Soh

Sorry guys/girls!! That was my bad X-p

@Nuramon Thanks very much for pointing that out, not sure how that portion got deleted :-p
Nov 22nd, 2009 @ 1:48 pm Rick Dawson

Thanks for putting this up. It’s just what i’m looking for
The first mega drop down menu that has all features and holds it’s mouse state when over the drop down.
I found a few tutorials/scripts before which lost the mouseover state when over the drop down.
I’m trying to get this working for a site that has a fixed width.
I cannot get the background (body_bg.png) to repeat, if the design has a fixed width (970px)
http://me.richarddawson.co.uk/menu2

I’ve even moved the background to it’s own DIV and set the BODY to 970px
Nov 23rd, 2009 @ 10:21 am Soh

@Rick, you can just add a overflow: hidden; and you should be good to go~
Nov 23rd, 2009 @ 12:14 pm Alexandre Cruz

Excellent tuto.

I´m your follower now. I´ve never see ur blog, excelent, excelent, excelent, excelent !

continue working in this, i loved
Nov 24th, 2009 @ 12:03 am tylerr

Hi, Soh! Let me say that your Mega Menu is just fantastic!
There are a few solutions out there, but none with simplicity and effectiveness of Yours…

I’d like to tweak a bit, but haven’t been able to do so… Wondering if you could help…

I’d like for the sub-nav to spread to the full-length of the menu, whatever menu option is hovered on… I this case 960px.

Conceptually, something like this:
http://www.moosejaw.com

Thanks in advance, Soh…
Best Regards, T.
Nov 24th, 2009 @ 1:52 am greyk50

Wow… you can always get cool stuff from Soh’s blog, keep up man, you ROCK!!!!
Nov 24th, 2009 @ 4:15 am J DesigN

I like this menu, thank you
Nov 24th, 2009 @ 5:55 pm CloneDVD

Thanks for sharing this wonderful articles. Great jobs!
I have marked it for future references.
thanks again.
Nov 25th, 2009 @ 3:37 am shab

Hello, i’m a french guy and i’m congratulate you for this very nice menu.
However, i’ve a question.
When i tried to put a background png in sub level to get a transparency, it doesn’t work in IE.
Because of the function “function megaHoverOver” that make mine sublevel totally opaque.

Please i need some help!
Nov 25th, 2009 @ 3:32 pm kels

Hey Soh what if I didn’t want it to fade in how would I do that?
Nov 28th, 2009 @ 12:53 pm Can Karpat

How can i use this menu with only text menu.. Not png?
Nov 30th, 2009 @ 3:42 am Jegan

hey when we use the png fix then we have to use png fix for IE6. is there any other way.
Dec 1st, 2009 @ 1:30 pm izdelava spletne strani

Cool, i was just looking around a drop down menu for my new web site and these first one does it. It’s perfect!
Dec 3rd, 2009 @ 5:30 am Ian Lloyd

It looks lovely. Nice and semantic … but what happens if I don’t/can’t use my mouse? Erm …

If you could update the jQuery to make it keyboard accessible – which should be simple enough to do – that would be a really good improvement to it.
Dec 7th, 2009 @ 10:56 pm Kiran

Great Navigation, I love it.
Dec 9th, 2009 @ 11:46 am kels

@Can Karpat: Just don’t use the

text-indent: -9999px;

and you will be good.
Dec 10th, 2009 @ 4:41 am Benji B

Tested in ie6/7/8 firefox PC/Mac and Safari Mac. Works identically

@kels
cheers for the tip. Saved me going down the wrong IR path.
Dec 10th, 2009 @ 5:08 am Benji B

oops misunderstood kels post. Disregard last sentence of previous post.
Dec 10th, 2009 @ 8:05 pm rahman

great tutorial…
thanxs a lot..
good job, its give me inspiration..
thanx thanx thanx xD
Dec 13th, 2009 @ 10:16 am David

Fantastic tutorial. Anyone having a hard time with the z-index of the menus? They appear behind other objects on my page.
Dec 16th, 2009 @ 8:44 am Barry

Great post. Thanks a lot, for making our life simple. We have started to apply your example in our website.
Dec 16th, 2009 @ 11:44 am Erik

David,

Having the same problem with the z-index….. Did you figure it out/

Erik
Dec 16th, 2009 @ 1:35 pm Erik

OK, I figured it all out. BUT. How do you reverse the direction of the popup menu when it’s too far to the left? Really stuck on thisone..

thanks.

Erik
Dec 17th, 2009 @ 6:27 am Moth

Great mega dropdown! Just used it on a site and it was easy set up.
Just one issue I’m having:
When I am on the actual page of the navigation that the dropdown “drops” from it doesnt’ work.
So if it drops down from my “servieces” link and I am on the services page the dropdown doesn’t show up?
Any ideas of why? or how I can change this?
Thanks so much!
Dec 19th, 2009 @ 9:21 am D

Erik, you say you’ve figured out the z-index issue…mind sharing with the rest of us who are stuck on that? :\ Would really appreciate it!
Dec 21st, 2009 @ 1:18 am Melissa

Erik,

You said you figured out the z-index??? I have been working on it for days with no luck. What did you do? I am using the menu differently than a linear menu it is more like a flyout and it works in everything except IE 6 and 7 what did you do? My example http://www.okaloosagas.com/newsite/working.html.

Thanks
Dec 21st, 2009 @ 6:34 am Andrew

Hey thanks for the great tutorial. Using this in a project that I am working on.
Dec 23rd, 2009 @ 12:01 am Terje Otto

I love the mega drop down menus! But Can you make a tutorial on how to use it with wordpress?

In particular with wp_list_pages(); si that I can assign parent pages and grand parent pages so it will mimic the looks of the one you have in demo here.

REALY hope you can help me on this one! have been working on this for almost two whole days now

Marry Christmas!
Dec 23rd, 2009 @ 4:21 pm Erik

Hi D, Melissa, and everyone,

I spoke too soon.. i thought everything was going great until I saw my work in IE6 and IE7…. But We will find a solution. Here is my work so far: http://www.naturalskin.com/home1.htm.

I wish we could hear from the master…

Erik
Dec 25th, 2009 @ 11:25 am Erik

Fixed the problem by using a hight z-index for the ul#topnav li .sub. Works fine.

Erik
Dec 25th, 2009 @ 9:33 pm Neha

Great work with easy coding.
Dec 26th, 2009 @ 6:06 am Adi

Hi,

In IE(all versions) the hover state of each main nav element is disappearing as mouse goes to sub-menu.In mozilla this is goin perfect.
So after checking in both browsers I think IE is not recognizing the following (hover state) style which is -
ul#topnav li:hover a{ background-position: left bottom; }

SO please suggest me the modifications to run this hover state in IE .
please help…
Dec 28th, 2009 @ 3:05 am Melissa

Hey Erik,

Just saw your post and jumped back into my code in hopes that would help. Unfortunately my z-index on that ID was alread set to 30000…I think that is pretty high. I am sure it has to do with the way I am trying to use the menu. Since I need it to be positioned over other menu items instead of other content on the page…I may need to go back to the drawing board.

Thanks
Dec 28th, 2009 @ 3:44 am marco

how to make a multilevel menu with this script?
thansk
Dec 28th, 2009 @ 10:13 am mybb

Thanks…..
Dec 28th, 2009 @ 10:55 am Vinidog

Nice, nice, nice…

Great job guy!!!
Dec 29th, 2009 @ 3:22 am Bucky

Thanks for the great tutorial! Just wondering, how do I get a semi-transparent PNG dropdown to work in IE? It works fine in Chrome & Firefox but not IE7 and 8.
Jan 5th, 2010 @ 3:54 pm Schweiz

Have these implemented and are working great. I’ve got a 950px fixed-width layout and when my browser window is resized to the dimensions of most users, the dropdown on the far right side goes off the page.

Any way to have this particular menu have the sub-navigation be aligned to the right edge of the wrapper so it stays within the viewable area?

I’m guessing I can specify a .class for the particular menu and do it? Anyone else have this issue and fix it?

Cheers!
Jan 6th, 2010 @ 2:59 am Betty

Really great post, thanx! I was looking for a tutorial on mega dropdown menus, and this one seems the most appropriate. I’ll give it a try at once.
Greetz, Betty
Jan 6th, 2010 @ 3:14 am Julia

Please help, repeated, but “How do I get a semi-transparent PNG dropdown to work in IE? It works fine in Chrome & Firefox but not IE7 and 8.”
Please help…..
Jan 6th, 2010 @ 4:36 am Julia

One solution for transparent background in ie7, ie8 it’s to add .css(’filter’, ‘none’)
will have
$(this).find(”.sub”).stop().css(’filter’, ‘none’).fadeTo(’fast’, 1).show();
instead of
$(this).find(”.sub”).stop().fadeTo(’fast’, 1).show();
But it cancels out the fadeTo in IE…
Jan 8th, 2010 @ 4:44 am Daniel Winnard

Hi,

This is a great tutorial, one which I have implemented into our site. One question though for you CSS savvy guys. What would I have to do to get the sub part to appear above divs after the navigation? Is this a Z-index job?
Jan 8th, 2010 @ 5:41 am Matt

Anyone having any trouble with IE not formatting the UL’s into two columns in the menu? That’s what’s happening on mine. You can see an example of it here: http://www.gallsdirect.com/gwebc/menus/menu2/menu2.html

(P.S. Only the first item in the menu is actually ‘linked’ – the rest is a flat graphic. It’s just for testing purposes at this point.)
Jan 13th, 2010 @ 6:51 am tylerr

In need of a small fix: How to make the mene NOT fade, but simply show/hide?

To clarify, how to “remove” fadeTo from the following code:

function megaHoverOver(){
$(this).find(”.sub”).stop().fadeTo(’0′, 1).show();
————-
function megaHoverOut(){
$(this).find(”.sub”).stop().fadeTo(’0′, 0, function() {
$(this).hide();
});

Soh, can you support a bit?

Thanks in advance to all!
T.
Jan 13th, 2010 @ 5:11 pm Irene

Wow, Great!
Jan 14th, 2010 @ 12:27 am Stefan

Erik,

Did you already figured out how to reverse the direction of the popup menu when it’s too far to the left?

Thanks!
Stefan
Jan 14th, 2010 @ 4:30 am Jamshed

It is awesome dude!

i was waiting for this for long time

thnx.
Jan 15th, 2010 @ 2:30 am Dean Perry

Another inspiration site could be http://tv.adobe.com
Jan 15th, 2010 @ 3:05 pm Áki

thanks man, awesome
Jan 16th, 2010 @ 3:15 am Áki

@tylerr:

this works for me:

function megaHoverOut(){
$(this).find(”.sub”).hide();
}
Jan 17th, 2010 @ 9:23 pm Aravind

It’s so nice…..thanks….
Jan 18th, 2010 @ 9:23 am Matt

Stefan, Erik – I’m also trying to figure out the problem of having the menu float out too far to the left. I’ll post solution here if I figure it out, and hopefully you can do the same. Or maybe someone can assist us with this? I’ll say this – simply adding a CSS class (like .subleft) isn’t enough since the script depends on that class being called ’sub’ and it will break the functionality on your menu if you re-name it. I suspect I will have to add elements to the script as well to fix this. I will begin experimenting.
Jan 19th, 2010 @ 1:50 am Stacy

Great! Thankyou!
Jan 19th, 2010 @ 12:09 pm All Web Services

What a nice menu and a great tutorial, this is what the big online shops use.
Jan 19th, 2010 @ 6:28 pm Greg K

Can you please show us how to make the “active state” work in this tutorial? I’ve read your other article and can’t seem to combine the two to work together. Any thoughts?
Jan 19th, 2010 @ 11:30 pm Steve

Absolutely fantastic script, fine work! I’ve used and adapted the script here … http://www.uprint.me.uk – one of the best Jquery scripts i’ve used. Thanks for all your effort.
Jan 20th, 2010 @ 12:09 am Ahmad Ali

mmhh nice but why when i mix with Mootools its wont work ??
Jan 23rd, 2010 @ 4:04 am Ayman Aboulnasr

Great work, thanks alot for sharing.
By the way, Christian Watson of http://www.smileycat.com has gathered 29 examples worth seeing Mega Drop Down Menus here:

http://www.smileycat.com/design_elements/mega_dropdown_menus/
Jan 24th, 2010 @ 6:29 am Roelof Wobben

Hello,

I try to make this work on this test site. But it don’t work.
Can you help me where things are going wrong here ?

Roelof Wobben
Jan 26th, 2010 @ 3:24 am Russ

Great Work!!

I think you have done well to make this look nice..However, I have to say I am not too keen on how the menu fades.

I think it should completely disappear before showing the next menu as otherwise it serves as a distraction.

But that is just the first impression I got of it.

Definitely very nice though!

Good work..
Jan 27th, 2010 @ 1:31 pm Steve

Russ > You can alter the speed at which the transition happens to make it much faster or no transition at all. A great script all told.
Jan 31st, 2010 @ 7:03 am James

Nice script, but I have a little problem that when I hover over the menu the drop down seems to make the whole part move to the left ?
Feb 5th, 2010 @ 4:05 pm Dirk

@Erik,

You made me happy. The z-index in ul#topnav li .sub works pretty fine.

Speak Your Mind…

Can't find what you're looking for? Don't be afraid to use the search, or simply just ask!

Blog Categories

Latest Blog Posts
CSS / XHTML / jQuery Tutorials
Everything CSS , XHTML & jQuery - Tutorials, tricks, tips and more.
Web Design Articles
All of my deep thoughts, articles, procedures, experiences, insight, and more.
Design Tutorials
Anything from design tips, Photoshop tutorials, and more.
Search Engine Optimization Tips
Search Engine Optimization tips, resources, techniques, and more
Resources & Tools
Fonts, Downloads, Tools, Plug-ins, Add-ons, and more!
Personal Interests & News
All of my personal interests and site updates. Stay up to date with whats happening.

Mega Drop Down Menus w/ CSS & jQuery