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:

screenshot_thumbnail

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(/web-design-tutorials/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:

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

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

52 Comments on "How to Make a Mega Drop-Down Menu"

  1. Shaun Collins says:

    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.

  2. Dan.H says:

    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 ??????

  3. Jon Phillips says:

    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! :)

    • tecnomaster says:

      Hi Joh,

      I want to thank you for the excellent tutorial and that is just what I needed for my website.

      I added the script code for the menu is automatic and it works perfectly but I have the following problem:

      When I pass the mouse over each menu the divs are placed above each. I have created several menu with the same effect and the problem is that not close the menu to change menu

      Note: Excuse the errors in the language but not speak English. Thanks and hope your help

  4. Jon Phillips says:

    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! :)

  5. Gravatar Icon Dan.H says:

    Thanks for your help !!!

  6. Monty says:

    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 :D

  7. Matt Mikulla says:

    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.

  8. FAQPAL says:

    Excellent tutorial, love using jQuery.

  9. Ted Goas says:

    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!

  10. Sorry about that Ted! The demo is now working…Enjoy!

  11. Tom says:

    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 :)

  12. Asmas says:

    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.

  13. 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

  14. Todd says:

    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.

  15. 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/

  16. JGarrido says:

    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/

  17. Asmas says:

    Thank you Mads for the great assistance, that’s really helpful. i do appreciate your great support.

  18. Asmas says:

    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.

  19. Atom Groom says:

    @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

  20. 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 :)

    • Andrew says:

      Hello. I found this site very helpful as it is what I needed!

      I would also like to know about the script with the menu hanging.

      Also, if it is possible to show how to leave the “services” color green like how the text changes colors when hover. while the cursor is still within that div menu

      Thank you!

Got something to say? Go for it!