How to Make a Mega Drop-Down Menu

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 &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>

<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
<title>Mega Drop-Down Menu Demo</title>
<link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />
<script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.3.2.min.js&quot;></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=&quot;#&quot;>home</a></li>
<li><a href=&quot;#&quot;>about</a></li>
<li><a href=&quot;#&quot;>services</a></li>
<li><a href=&quot;#&quot;>products</a></li>
<li><a href=&quot;#&quot;>portfolio</a></li>
<li><a href=&quot;#&quot;>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=&quot;#&quot;>home</a></li>
<li><a href=&quot;#&quot;>about</a></li>
<li><a href=&quot;#&quot;>services</a></li>

<div class=&quot;servicesdropped&quot;>
<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=&quot;#&quot;>Web Design</a></li>
<li><a href=&quot;#&quot;>Hosting Solutions</a></li>
<li><a href=&quot;#&quot;>Logo Design</a></li>
<li><a href=&quot;#&quot;>e-Commerce</a></li>
<li><a href=&quot;#&quot;>WordPress Integration</a></li>
<li><a href=&quot;#&quot;>PSD/PNG Conversion</a></li>
</ul>
<ul>
<h3>Writing Services</h3>
<li><a href=&quot;#&quot;>Freelance Writing</a></li>
<li><a href=&quot;#&quot;>Blogging</a></li>
<li><a href=&quot;#&quot;>Proofreading</a></li>
<li><a href=&quot;#&quot;>Copywriting</a></li>
<li><a href=&quot;#&quot;>Ghost Writing</a></li>
<li><a href=&quot;#&quot;>Marketing Plan</a></li>
</ul>
</div>

<li><a href=&quot;#&quot;>products</a></li>
<li><a href=&quot;#&quot;>portfolio</a></li>
<li><a href=&quot;#&quot;>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

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=&quot;text/javascript&quot;>
$(document).ready(function(){
$(&quot;.downservices&quot;).click(function(){
$(&quot;.servicesdropped&quot;).toggle(&quot;fast&quot;);
});
});
</script>

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

Step 3 – CSS3

I used some CSS3 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!

MechaTurtle says:

October 31, 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.

November 1, 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 says:

November 2, 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 says:

November 4, 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 says:

November 5, 2009 at 10:50 pm

Thanks, this helped to resolve my site menus

Melissa says:

November 9, 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 says:

December 4, 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 says:

December 8, 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 says:

December 22, 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 says:

December 30, 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.

December 30, 2009 at 4:59 pm

Actually nevermind I got it figured out!

December 30, 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.

December 31, 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?