How to Make a Mega Drop-Down Menu

You are here: Home » Tutorials » How to Make a Mega Drop-Down Menu

How to Make a Mega Drop-Down Menu

Jon Phillips of Spyre Studios brings us a great Mega Menu tutorial. This tutorial is suitable for all levels of web designers and developers. All the files are attached so you can work your way from beginning to end.

By Jon Phillips on August 21st, 2009 in Tutorials |

Mega drop-down menus are not actually new, but more and more we see them on popular websites and blogs. With the ever increasing quantity of content on the web we have to figure out solutions to display content and navigation but still keep everything usable and provide a good user experience. It’s no wonder mega drop-downs are now used more often.

Today we’ll take a look at creating a simple HTML site with a horizontal navigation bar where a menu item will have a mega drop-down attached to it. I used jQuery for the drop-down and some CSS3 for the rounded corners.

First of all we’ll need a design:

Step 1 – The Markup

Before we can start working on the mega drop-down menu we will need a working site so let’s write our HTML. Of course for the purpose of this tutorial the links in the menu won’t work.

Let’s start with the header. We’ll include our style.css file and the jQuery library (you can download the jQuery library here.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mega Drop-Down Menu Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</head>

Then we will add a H1 and a paragraph that explains what the demo site is about:

<body>
<h1>Mega Drop-Down Menu Demo Site</h1>
<p>This page is an example of a mega drop-down menu, but with more options than the usual suckerfish drop downs. We used jQuery, CSS3 and HTML to create this mega drop down menu.</p>

And then our navigation bar (without the drop-down for now):

<div>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">products</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>

We have 6 menu items and we will use the ’services’ tab and attach our drop-down to it. But before we do that let’s add some content to our site. We’ll put 2 paragraphs with some Lorem Ipsum inside a div.

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>

<p>Ut purus metus, fermentum vitae pulvinar vel, elementum eget nulla. Pellentesque posuere, enim ut dapibus vestibulum, leo nunc porttitor neque, sed pulvinar orci sem eleifend sapien. Nullam at odio nibh, eu pharetra ipsum. Pellentesque eget ante nec ante consequat ullamcorper a vitae mauris. Integer lacus lorem, sollicitudin vulputate posuere at, commodo a sapien. Vivamus lobortis vehicula imperdiet. Donec a congue tortor. Fusce augue tortor, pretium pharetra pellentesque ornare, laoreet nec sapien. Ut eget magna tellus. Pellentesque posuere accumsan condimentum.</p>
</div>

And then we can end our document with the closing body and html tags.

Before we dive into the CSS, let’s add our drop-down. Here’s the new markup for the menu. I added a class to the ’services’ list item since this is the one that will have the mega drop-down and I added a div with some content in it.

<div>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>

<div class="servicesdropped">
<p>Here's an example of a paragraph inside the drop-down panel. We placed this paragraph in the left column. Then we have 2 more columns on the right with a H3 for the section title and then we have unordered lists.</p>
<ul>
<h3>Design Services</h3>
<li><a href="#">Web Design</a></li>
<li><a href="#">Hosting Solutions</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">e-Commerce</a></li>
<li><a href="#">WordPress Integration</a></li>
<li><a href="#">PSD/PNG Conversion</a></li>
</ul>
<ul>
<h3>Writing Services</h3>
<li><a href="#">Freelance Writing</a></li>
<li><a href="#">Blogging</a></li>
<li><a href="#">Proofreading</a></li>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Ghost Writing</a></li>
<li><a href="#">Marketing Plan</a></li>
</ul>
</div>

<li><a href="#">products</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>

As you can see the whole mega drop-down panel is contained within the div=”servicesdropped”. I put a paragraph and some unordered lists in there (later styled using CSS)

Now we have a working HTML website. Of course without CSS it doesn’t look very good as you can see:

unstyled screenshot How to Make a Mega Drop Down Menu

Part 2 – jQuery

Now let’s work on the jQuery part. It’s actually very simple. I want the ’services’ tab to open up a mega drop-down panel when clicked. And I want the panel to close the ’services’ tab is clicked again.

Let’s insert this code in the head of our document:

<script type="text/javascript">
$(document).ready(function(){
$(".downservices").click(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>

This will tell the browser to toggle the panel with a class of <em>.servicesdropped</em> up and down when the list item with a class of <em>.downservices</em> is clicked. Simple huh?

Step 3 – CSS3

I used some <a href=”http://www.css3.info/preview/” title=”CSS3 Previews”>CSS3</a> to give our divs and paragraphs some rounded corners. Of course the rest of the CSS file is pretty straight forward:

body {
background:#eee;
text-align:left;
color:#666;
width:700px;
font-size:16px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

h1 {
font-size:46px;
font-family:'Trebuchet MS', helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#000;
font-weight:400;
padding:20px 0 0;
}

h2 {
font-size: 34px;
font-family: 'Trebuchet MS', helvetica, arial, sans-serif;
color:#21211f;
font-weight: 400;
padding: 20px 0 10px; 0
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight:400;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 15px;
}

p {
color:#aaa;
font-style:italic;
line-height:22px;
padding:0 0 30px;
}

img {
border:none;
}

.content {
margin:10px 0 50px;
padding:0;
}

.content p {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#676767;
background:#fff;
border:1px solid #fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:35px 0;
padding:20px;
}

.megamenu {
background:#9FC54E;
border:1px solid #9FC54E;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-family:helvetica, arial, sans-serif;
font-size:24px;
width:698px;
height:60px;
color:#FFF;
margin:0;
padding:0;
}

.megamenu ul {
text-align:center;
list-style-type:none;
margin:0;
padding:16px;
}

.megamenu ul li {
list-style-type:none;
display:inline;
margin:0;
padding:0;
}

.megamenu ul li a,.megamenu ul li a:visited {
text-decoration:none;
color:#fff;
margin:0;
padding:10px;
}

.megamenu ul li a:hover,.megamenu ul li a:visited:hover {
text-decoration:none;
color:#CEFF65;
margin:0;
padding:10px;
}

.megamenu ul li.downservices {
background:url(images/arrow.png) 100% 55% no-repeat;
margin:0;
padding:10px 8px 10px 10px;
}

.servicesdropped {
display:none;
text-align:left;
position:absolute;
background:#172323;
font-size:12px;
width:590px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #000;
margin:10px 0 0 20px;
padding:10px 20px 20px;
}

.servicesdropped p.textleft {
float:left;
font-size:12px;
width:200px;
margin:10px 0 0;
padding:0 20px 15px 10px;
}

.servicesdropped ul.middle {
text-align:left;
float:left;
border-right:1px solid #333;
border-left:1px solid #333;
font-size:12px;
width:180px;
margin:0;
padding:0;
}

.servicesdropped ul.right {
text-align:left;
float:left;
font-size:12px;
width:178px;
margin:0;
padding:0;
}

.servicesdropped ul.right li a,.servicesdropped ul.middle li a {
list-style-type:none;
display:block;
color:#888;
font-size:12px;
margin:0;
padding:5px 0 5px 20px;
}

.servicesdropped ul.right li a:hover,.servicesdropped ul.middle li a:hover {
list-style-type:none;
color:#9FC54E;
display:block;
font-size:12px;
margin:0;
padding:5px 0 5px 21px;
}

Our rounded corners are styled using the border-radius property (the W3C validator doesn’t like this, but it looks good and doesn’t impact usability at all). Something like this:

border:1px solid #000;
-moz-border-radius:5px;
-webkit-border-radius:5px;

Of course I changed the border color to match the color of my divs and paragraphs. The rounded corners won’t work in IE6, but does it really matter?

Working Demo And Download

Please have a look at the demo to have a better idea of how the menu will work:

View Demo

You can also download a zip file containing the files from this tutorial:

Download ZIP file

I hope you enjoyed this tutorial, please let me know what you think!

Did you like it?

Help us spread the word!

About The Author

Jon Phillips

Jon Phillips is a designer and Wordpress developer who also blogs about design and typography for a specialist supplier of printer cartridges based in the United Kingdom.

Comments

Shaun Collins said :
August 27th, 2009 at 8:31 am
Excellent design, but the implementation is not what site visitors have come to expect. For example, Drop-Down menu should show on MouseOver, and hide on Drop-Down MouseOut (or click outside of the menu panel.
Dan.H said :
August 28th, 2009 at 9:24 am
Excellent ,but this tut has to be modified to works with IE,and if you want duplicate the drop down, you have the same content ……..
Do you have a solution for the second problem ??????
Jon Phillips said :
August 28th, 2009 at 8:28 pm
Hi Shaun! Thanks for the nice words on the design. Regarding your comment on the usability, I think it’s a personal choice. I personally don’t like when menus open up when I mouse over, I find this quite annoying actually – my reasoning is this: if I want to open it, I’ll click, if I don’t click, keep it closed.
But, if you want to have it open and close when you mouse over/leave, you could do something like this instead:
$(document).ready(function(){
$(“.downservices”).mouseenter(function() {
$(this).parent().find(“.servicesdropped”).slideDown(“fast”).show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“.servicesdropped”).slideUp(“fast”);
}); }); });
Hope that helps! Thanks again for the great comment!
Jon Phillips said :
August 28th, 2009 at 8:35 pm
Hi Dan,thanks for your comment! Just wondering, do you mean IE6? I tried it out in IE7 and it worked fine here. Regarding your second question, I think my comment to Shaun above can help a bit. In the tutorial I made the drop down react when the trigger was clicked (on/off) so if you duplicate the menu it’s possible the second or third panel gets hidden ‘behind’ the previously opened panel. Having the menu work with the mouse over/leave ’should’ fix this issue since you don’t need to click the menu item again to close a panel. If you’d like I can try to come up with a solution and post it here.
Alternatively, the Mega Drop-Down plugin could be used (http://www.javascriptkit.com/script/script2/jkmegamenu.shtml) though I haven’t tried this solution yet. I guess it depends on the project and what you’re trying to achieve, sometimes the solution in this tutorial will work fine, and other times the mega-menu plugin will work better.
Hope that helps!
Gravatar Icon Dan.H said :
September 1st, 2009 at 7:55 am
Thanks for your help !!!
Monty said :
September 2nd, 2009 at 10:59 am
Hey,
What a pretty awesome tutorial, have really learnt a bit here regarding the menu system with jQuery. Only problem is, it doesn’t work in Internet Explorer 8. Any possible solutions to this problem?
Keep the good work coming in
Matt Mikulla said :
September 6th, 2009 at 1:15 pm
I believe the menu should open up on mouseover, just not right away. You could use the hoverIntent plugin to delay the hover until the mouse stops.
I’m not that great at js and jquery but I would love to find a way to use the hoverintent plugin and your style of mega-menu.
FAQPAL said :
September 24th, 2009 at 2:13 pm
Excellent tutorial, love using jQuery.
Ted Goas said :
September 28th, 2009 at 10:25 am
Hey did something happen to the demo? http://www.thewebsqueeze.com/samples/mega-menu/demosite/
Just stumbled across this and am anxious to see it in action!
Linda Chadbourne said :
September 28th, 2009 at 8:48 pm
Sorry about that Ted! The demo is now working…Enjoy!
Tom said :
October 8th, 2009 at 8:24 am
Nice work, but a shame it doesn’t validate. Div’s really should not be in the middle of lists. I am looking to see what can be done
Asmas said :
October 13th, 2009 at 3:57 am
Thanks for the great tutorial, I do need your help as i’ve became puzzled trying all the ways, I’m doing a multiple buttons navigation based on your tutorial, lets say I got 5 buttons, when a user click menu #1 then it will show, but when he click menu #2, then #1 should fadeout or slideup and VS, if he click on #1 then #2 should gone.. how could i do that? I do appreciate your great tutorial.
Mads Klitgaard said :
October 19th, 2009 at 4:04 am
Thanks for this tutorial Jon.
I’ve made some changes to it so it now does the same thing, as you’ve wanted it to, but also validates. No more div inside lists
Also i’ve changed the script to do mouseover (As you wrote in a comment) as this is the “preferred” state of dropdowns as fewer mouse clicks makes happier readers
Anyways i’ve also included a second dropdown, which i changed a little so you can see the difference, to show Asmas, how this can be added.
You can see it here:
http://www.madsklitgaard.com/megamenu
Todd said :
October 19th, 2009 at 6:37 am
Hi Mads. That’s super cool you made those changes. I want to see them but I’m getting an Access Forbidden message when I attempt to access your site.
Mads Klitgaard said :
October 20th, 2009 at 8:17 am
Hey Todd.
Sorry for the link not working. I’m working on a big project and forgot that I’ve cut off access to a parent domain!
This one should work however
http://www.wallofweird.com/megamenu/
JGarrido said :
October 21st, 2009 at 12:04 pm
I like Mads version better, but it still has issues in IE6 & 7. I’d also recommend using tip#4 from this article:
http://blog.themeforest.net/tutorials/7-things-i-wish-i-had-known-about-jquery/
Asmas said :
October 22nd, 2009 at 12:43 am
Thank you Mads for the great assistance, that’s really helpful. i do appreciate your great support.
Asmas said :
October 22nd, 2009 at 1:05 am
Hi mads, Its kinda so slow and sometimes it hang between the both menus, u try it, try to move ur pointer on a vertical way after you click the first drop-down, it will not hide as its happening with me.. is this a script hang or a browser problem or a jQuery error?
i do appreciate your support.
Atom Groom said :
October 22nd, 2009 at 5:04 pm
@Mads Klitgaard
I like your example, it works much better in IE, but in IE6 and IE7 you have some positioning problems.
I messed with it for a sec and you just need to put some position selectors on .megamenu, then re-position the drop downs with position selectors, and you’ll get a better result in all browsers.
I wish I could be more specific, just strapped for time!
I’ll try to re-post the fix.
AG
Mads Klitgaard said :
October 27th, 2009 at 4:50 am
Sorry for the late respons guys.
I’m glad you like it so far.
I’m on my mac at the moment and therefore haven’t been able to test out the menu in IE.
Asmas
Yes there is a problem with the menu “hanging” you have to move the mouse outside the menu for it to “reset”. The problem is the Javascript used. If i get the time i have another javascript function, which would work a lot better if i’m able to implement it.
Atom
Thanks that would be great as i haven’t got IE to test it out
MechaTurtle said :
October 31st, 2009 at 11:43 pm
Thanks to all contributing to this, it is very helpful! I made a modification to Mads javascript function that let me get the rid of the menu “hanging” without requiring me to leave the menu.
I modified the two lines in the javascript section that read:
$(this).parent().hover(function() { }, function(){
And replaced them with:
$(this).mouseleave( function(){
Mainly removed the “hover” check for collapsing the menu and replaced it with a mouseleave on the pop-up menu. I tested on Firefox, Safari, IE7 and IE8 and seems to work. YMMV.
I wish I understood the CSS positioning better for the megamenu offset in IE7 though! That’s where I’m currently stuck.
MechaTurtle said :
November 1st, 2009 at 2:45 pm
I’ve revised my previous suggestion to fix the menu “hanging”. The hanging went away with those changes, but occasionally I would get a strange bouncing effect on the pop-up menu(constant slideUp, slideDown.) I think the “this” object wasn’t what I thought. Instead, replace the two aforementioned lines with this:
$(this).parent().find(".servicesdropped").mouseleave( function(){
Sorry for the confusion.
Mads Klitgaard said :
November 2nd, 2009 at 5:46 am
MechaTurtle
Good work!
I’ve just gotten Windows 7 installed on my stationary PC, which is now working, so if i get the time i’ll be looking at the IE problems.
Illu said :
November 4th, 2009 at 6:42 am
Wow, nice script!
Is it possible to let the subnav slide up instead of down? And how?
Tnx!
Loganathan Natarajan said :
November 5th, 2009 at 10:50 pm
Thanks, this helped to resolve my site menus
Melissa said :
November 9th, 2009 at 4:39 pm
Is there any way to get this menu to display over Flash? I am inserting flash using the swfobject static publishing method. I have tried a bunch css positioning properties, but I just can’t get it to display on top of the flash. Using z-index properties I can get it to disply over flash on a mac, but this does not work on a pc. I am open to using a different method of inserting the flash if that would fix the problem. I would greatly appreciate any help reaching a solution where this menu displays on top of flash in IE and Firefox on both Mac and PC.
Simon Romin said :
December 4th, 2009 at 5:34 pm
Thanks Jon for the tutorial. You have managed to help a complete novice in getting a mega drop-down menu to work. You are brilliant. However, I have two questions:
1/ How do I disable the animation? I will be very happy for .servicesdropped to just ‘appear’.
2/ How do I add additional drop downs? For example, .productsdropped, .contactdropped. I have worked out a way but I don’t know if it’s the ‘right’ way.
I would hugely appreciate any feedback. Thanks for all your help so far.
Simon
noltha said :
December 8th, 2009 at 2:53 pm
Hi MechaTurtle,
did you make the menu work with IE8?
I’m trying to implement your edit but don’t really understandand how.
Can you explain it?
Thank you very much
Roy Killroy said :
December 22nd, 2009 at 9:13 pm
No demo? Get with the times loser. No one wants to spend and hour working on something that they don’t know how it will look.
I hope you get cancer of the eye and asshole and die very soon.
Roy Killroy
Jason said :
December 30th, 2009 at 4:40 pm
I’m trying to use this and have mulitiple drop downs in a vertical menu. It keeps displaying the same menu over and over.
I set it to mouse out like you suggested but this didn’t fix the problem at all.
I’m trying to get this worked out asap for work so any help would be appriciated.
Jason said :
December 30th, 2009 at 4:59 pm
Actually nevermind I got it figured out!
Jason said :
December 30th, 2009 at 10:28 pm
Is there an easy way to make the drop down disappear when you click on another link.
Right now it’s not so great. You click on a link.. it pops out fine but when you click on another link the pop out goes on top of the old one. You have to actually click on the old link to get it to close again.
The exact same problem occurs if you use the mouse overs as well.
Jason said :
December 31st, 2009 at 12:35 pm
sorry for all the replies.
here’s what i’m working on right now
http://www.stuff.com/newnav/
You can see what I’m trying to accomplish. Everything is working the way it should except when you toggle between the menu items it doesn’t hide the old menu.
I tried using MechaTurtle’s solution but it doesn’t work at all for me. The first one he posted allows you to use the menu and it displays properly but then you can’t actually hover over the mega menu itself.
Could anyone help?
Chris said :
January 6th, 2010 at 3:54 pm
The initial location before sliding is a bit high. The menu slides down over my nav. Is there a way to change the initial position?
Vasiliy said :
January 8th, 2010 at 5:54 pm
Hello, Jon Phillips!
Thank You for this greate Mega Menu.
Maybe You can tell me how to past this Mega Menu in php SEO, PrestaShop for example?
Many thanks for the answer!
Vasiliy.
JohnW said :
January 8th, 2010 at 6:37 pm
Has anyone created a good mega dropdown plugin for wordpress?
Vinidog said :
January 9th, 2010 at 6:29 pm
Nice… great job!!!
Andreas AK said :
January 28th, 2010 at 10:52 am
Nice mega menu, did you already find the solution for IE 8 ?
James said :
January 31st, 2010 at 10:25 am
The download of the files does not work for some reason