css

Create a multilevel Dropdown menu with CSS and improve it via jQuery

Some of you might have noticed, I have a partiality for sleek menus. As I recently had to create a multi level dropdown menu for one of my customers, I wanted to improve it with a little bit of jQuery, but couldn’t find a script that accomplished what I needed.

So I decided to build this menu from scratch and share my thoughts as well as the code with you.

So before we start: this is what we are going to build


The first part of this tutorial is dedicated to the task of building a working CSS-only dropdown menu (also known as suckerfish menu), the second part will show you how you can pimp the whole thing with a few lines of jQuery.

The CSS-only menu is cross browser tested and from what I can tell works with all browsers except for IE6.
The Internet Explorer needs the addition of our jQuery function to work properly.

To create a CSS-only dropdown menu that works without Javascript (even in IE6), you need tons of extra markup and CSS, if you really need this for any reason check out Stu Nicholls CSSplay, he addresses this problem with heavy (ab)use of conditional comments =)

Now that you have a little bit of background information, lets create our own menu:

First of all we need the XHTML Structure of our soon-to-be terrific menu. We will use a nested list for this purpose, top level list id is “nav”:

<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

Thats it for the HTML part; without CSS styling our menu looks like this: Step 1

Now for the stylesheet part:

#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
 }

This removes the indents browsers tend to make, as well as the bullets from #nav and all its child-ul elements. The “position:relative” is needed since we will arrange some of the contained elements with position:relative and absolute. This is necessary since relative and absolute positioned elements are positioned according to their containing blocks with a position attribute, other then static.

Line-height defines the height of each list item. You could set the height attribute for your list-items to define their height, but line-height will center the link text vertically without the need to play with margins and paddings.

 #nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#333;
 }

#nav a:hover{
    background-color:#fff;
    color:#333;
}

This one is pretty straight forward:
it will style each hyper link in our menu a little bit. At this time the menu looks like this: Step 2

Now lets add some more styles:

#nav li{
    float:left;
    position:relative;
}

This will align our list elements horizontally.

#nav ul {
    position:absolute;
    width:12em;
    top:1.5em;
    display:none;
}

This will position the nested Lists right beyond the main menu and give them a width of 12em. The width attribute is needed so that the list items within display vertically again. The Top attribute should have the same value as the line-height attribute we defined for #nav.

#nav li ul a{
    width:12em;
    float:left;
}

This will set the width of the hyper links to 12 em (which in combination with the width of the UL set above results in a horizontally displayed sub menu, despite of the ongoing float:left)

#nav ul ul{
	top:auto;
	}

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

#nav ul ul and #nav li ul ul define where we display the sub menus.

The hover states define which items we want to show when hovering over an item (only the next sub level, not all of them)

After applying these styles we got this menu: Step3

If you are working with a browser other than IE6 you should have a basic dropdown menu now.

Gogo jQuery!

So lets spice up the menu a little bit. First of all here is the whole jQuery Code I used to create the effect:

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

 $(document).ready(function(){
	mainmenu();
});

Step by step description:

$(" #nav ul ").css({display: "none"}); // Opera Fix

This is a small fix for Opera, which doesn’t hide the menus fast enough, if you hover above them and so creates a flickering effect. $(” #nav ul “) is the jQuery way to select all unordered lists in #nav. Usage of this is similar to selecting CSS elements. The .css({display:”none”}) sets the display attribute for all Unordered lists to none.

$(" #nav li").hover(function(){ // here goes mouse over effect
                  },function(){ // here goes mouse out effect
                               });

This is the jQuery function for hovering. Really simple to use: first function lets you define what happens when you hover over a specific item( in our case a list item), second function is used for the mouse out event.

$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).show(400);

This function finds the first hidden unordered list within the currently hovered list item and shows it. The function “.show” works only under specific circumstances, this is why we set the display to none. The number between the braces defines the animation speed in milliseconds.

$(this).find('ul:first').css({visibility: "hidden"});

This is the mouse out event: we use visibility instead of display since the show function mentioned above, sets display to “block” at the end of the animation. This way if you would hover just a short moment over the item the item would not display for the ongoing animation and then pop out all of a sudden. Using visibility prevents this flickering.

 $(document).ready(function(){
	mainmenu();
});

This function will call our mainmenu() function as soon as the html document is ready.

We are done now, if you can’t get this to work for any reason, here is a working example for download:

Download
Includes: HTML File, CSS File, Javscript Files

Have fun creating your own menu ;)

Update :

I have added some small fixes to the script which were suggested by some of my readers, so thanks for adding improvements. ;)

Another thing I wanted to note: I have seen this script in many templates and wordpress themes now, often used in conjunction with one of wordpress automatic list generating features (wp_list_categories, wp_list_pages)
If you use it that way wordpress adds a title attribute to each link, which can create a flickering effect when the browser tooltip for the title appears. If you are using the script this way you should add the following line of jquery at the beggining of the script to remove the titles:

$(" #nav a").removeAttr("title");

(Last updated 18.09.2008)

Tags: , ,
398 replies
« Older CommentsNewer Comments »
  1. jhoanna
    jhoanna says:

    i have tried to customize the script for my needs and instead of html css and javascript i’ve put home ,about us,resources,contest,login, but i have a big problem and i don’t know what to do.It appears only home and about us.I mention that i have changed only in html script.Please help me,i’m very sad.thanks in advance.

  2. Ritesh Reddy
    Ritesh Reddy says:

    Nice one Kriesi! It works almost like a charm, but I have trouble catching the submenu because it disappears before I can click it. I get it after a few games of cat and mouse :) Can I increase the hover time so that it stays long enough to be clicked?

  3. Matt
    Matt says:

    Great job! Unfortunately the fadeIn() does not work in IE8, but it does work in previous versions. I hate IE.

  4. Dave S
    Dave S says:

    Hi. Lovely looking menu. Can’t integrate it into WordPress though, something I’ve tried to do today. I’m loading the kwicks.js and custom.js and relying on WordPress to load the jQuery via:

    in my header.php

    I see the unordered list but can’t see any images (paths are OK). Only thing I didn’t copy from your style.css to mine was :

    body{font-size:0.85em;
    font-family:Verdana, Arial, Helvetica, sans-serif;}

    because I already have a body entry in style.css.

    I’m using FF and have Firebug available to debug if required.
    Any ideas anyone? Thanks in advance

  5. Priyank
    Priyank says:

    The menu is not working in IE. Sub menu disappears after rolover on main menu.

    I have given following style. Please let me know how would be able to i fix it and make stable. Wihtout removing margin of 1px to submenu.

    #nav ul { position:absolute; display:none; width:auto; top:40px; margin:1px 0 0 -10px; z-index:1000; background-color:#333;
    }

  6. Gabriel
    Gabriel says:

    Hi there. I am currently working on my first website, and this tutorial has helped me. I am however having trouble figuring something out. The way the css is set up in this walkthrough, it seems that you can only apply one styling for all of the hyperlinks. My question is, how can I modify this code so that I can style the dropdown hyperlinks to look different than those of it’s parents on the main nav bar? I hope that makes sense. Thanks!

  7. Salient Digital
    Salient Digital says:

    I really like the tutorial and the blog, however you shouldn’t criticize Stu Nicholls CSSPlay.co.uk menus. His CSS only dropdown menus work perfectly in IE6, IE7, IE8 plus all the good browsers and requires no Javascript at all – talk about lightweight. Sure, the conditional comments are a bit confusing but I’m disappointed after reading all the comments. Does the current download work in IE6-IE8 or do I have to hack and experiment to get it working everywhere?

  8. RickB
    RickB says:

    How can I make firefox look like ie…
    I would like to turn off shadows and have firefox not indent the menus…

    Appreciate your help

  9. Dirk
    Dirk says:

    Danke, für dieses Tut!
    Very good tutorial to get into jQuery and multilevel menus! Thank you so much!

  10. pierre
    pierre says:

    Hey, this menu is really cool, one problem though,

    How can you fix this behaviour:

    When you reduce your browser window’s size (actually, the width) until you reach the menu, then the menu elements start moving down in the page (I guess it’s caused by the float:left and relative position)?

  11. Ajit
    Ajit says:

    i was try to create my first menu for 2 months but each time i failed but u made it luk so easy.
    thank u

  12. Craig
    Craig says:

    I get a “$ is not defined error” in Firefox if I update the jQuery library to 1.4.2. Anyone have any ideas what the problem is?

  13. Daniel
    Daniel says:

    Well Thanks, i thought that you only sell templates, but you also teach people for free, this is good.. =D

  14. SNU
    SNU says:

    Thank you so much. it works fantastic!
    But, my others addons, such as lightbox, doesn’t work when I use this dropdown, why?
    And when I remove this dropdown, my lightbox can work again.
    Are there some codes bumping? my lightbox code with your dropdown code?
    Help me please ><
    Thank you very much.

  15. Tristian
    Tristian says:

    Best Example on Jquery Menu so far.
    Very easy to implement and worked the first time without any issues.
    Excellent tutorial.
    Thanks a bunch………………

  16. Jordan
    Jordan says:

    This worked for me:

    function mainmenu(){
    $(“#nav> li > ul”).css({display: “none”}); // Opera Fix
    $(“#nav> li”).hover(function(){
    $(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}).fadeIn(‘slow’);
    },function(){
    $(this).find(‘ul:first’).fadeOut(‘slow’);
    });
    }

Trackbacks & Pingbacks

« Older Comments

Comments are closed.