Oct 7, 200831

jQuery & CSS Example - Dropdown Menu

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

The Finished Product

Getting Started

To begin, we need to define our basic menu hierarchy. In order to maintain a structured and semantic approach to this, we will use nothing more than unordered lists of standard links. We’ll use the following code as an example:



<ul id="cssdropdown">
<li class="headlink">
	<a href="mine.html?search_engines">Search Engines</a>
	 <ul>
	  <li><a href="http://google.com/">Google</a></li>
	  <li><a href="http://yahoo.com/">Yahoo</a></li>
	  <li><a href="http://live.com/">Live Search</a></li>
	 </ul>
	 </li>
	  <li class="headlink">
	  <a href="mine.html?shopping">Shopping</a>
         <ul>
	  <li><a href="http://amazon.com/">Amazon</a></li>
	  <li><a href="http://ebay.com/">eBay</a></li>
	  <li><a href="http://craigslist.com/">CraigsList</a></li>
	 </ul>
 </li>
</ul>

You should see something like this:

Basic Unordered List of Links

Creating Dropdown Lists

With our semantic HTML and link structure written out, we can proceed to apply some basic hover techniques that are included in CSS. The :hover pseudo-class is invoked when the mouse is placed over the list item.

We can use CSS to hide the child unordered lists by default, and show them with the :hover pseudo-class, like so:


       li.headlink ul { display: none; }
       li.headlink:hover ul { display: block; }

It is best to take this opportunity to apply some basic styling to the list, such as floating the parent unordered lists in a row, and specifying the width of the unordered list to ensure that no shifting occurs when the elements are hidden or shown. This should look something like this:

The Basic Styling Applied to the Unordered List of Links

The Issue with Internet Explorer

Unfortunately, while the :hover pseudo-class may be elegant, it does not work in Internet Explorer. At this point, a short bit of JavaScript is required to provide a clean fix. All we need to do is select all unordered lists that are within a list item that has the class .headlink and add onmouseover and onmouseout events to them. This can be done in twelve simple lines of code:


	window.onload = function()
	{
		var lis = document.getElementsByTagName('li');
		for(i = 0; i < lis.length; i++)
		{
			var li = lis[i];
			if (li.className == 'headlink')
			{
				li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
				li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
			}
		}
	}
	

Those using jQuery are privileged to an even easier solution:


	$(document).ready(function(){
		$('li.headlink').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });
	});
	

Putting It All Together

The dropdown menu is now functional in the major browsers, and is ready to be styled, cleaned up, and shipped.

It is advantageous to start by applying a basic style that’s a little more appealing than the standard lists. This allows us to visualize how this will fit into our application or design.

Standard Styling on Dropdown Menu

Adding Some Flare

With a few extra lines of CSS, the menu is styled and ready to fit into our site.

Wrapping Up

One important aspect of writing a generic dropdown list is to segregate the CSS and JavaScript to ensure that there are no conflicts. The easiest way to do this is to add the #cssdropdown selector in front of every element.

Finally, we check to see if the #cssdropdown div can be moved around freely. This ensures that dropdown menu we have created will flow nicely when integrated with our existing site design or application user interface.

The full code and example remains both basic and concise to exemplify the simplicity of the underlying technique for using dropdown menus on your website. Enjoy!

Tutorial kindly written by Nathan Wong

If you like this post, subscribe to our RSS feed. Or follow us on Twitter.


Digg This Stumble it!

31 Comments

  • George
    Oct 7, 2008

    This one’s going in the bookmarks. I was looking for a clear explanation of this. Some tutorials I’ve seen have lines and lines of unnecessary markup. Thanks for keeping this simple.

  • Brandon Cox
    Oct 7, 2008

    Awesome tutorial and example. Drop downs consume a ton of hair-pulling time for me - I appreciate the help!!

  • iddaa
    Oct 8, 2008

    Very nice blog http://designreviver.com/

  • Dainis Graveris
    Oct 8, 2008

    Nice tut and inspirational outcome! :) I needed detailed tutorial like this - so thanks, appreciated!

  • Nathan Wong
    Oct 8, 2008

    I’m glad you guys are making use of the tutorial. I appreciate the kind words. Keep an eye out over this coming week for a handful of jQuery/CSS tutorials on various common UI elements! :)

  • utchanovsky
    Oct 9, 2008

    Wow, cool tutorial. I’ll bookmark this. Thx a lot

  • Blaketdet
    Oct 9, 2008

    Thangs …Bro

  • Martin Sarsini
    Oct 10, 2008

    It’s a good simple system. But if you are looking for more complex stuff, more personizable options, compatibilty with flash z-index etc… jdmenu is the best

  • Tim
    Oct 10, 2008

    What about adding a delay to the mouse out event? That way if you accidentally move the mouse the wrong way, it won’t close the pulldown. This helps when the dropdowns get complicated (with sub-dropdowns, etc). Do you have an easy way of doing this? Or perhaps adding a slower animation to the pulling down of the menu, that would help to. I realize your purpose of making it simple, and that’s awesome. This is one the simplest and best described tuts on this I’ve seen.

  • iso 17025
    Oct 10, 2008

    Great article! Very useful.

  • Rahul
    Oct 11, 2008

    very nice. I like CSS examples and am also inclined towards jQuery as well.

  • Ap
    Oct 11, 2008

    @Tim: I second that!

  • Zafar Iqbal
    Oct 11, 2008

    It really is a nice example, showing in simple but still with some details about setting up a nice one level CSS drop-down menu. Addition of jQuery also enhances its usability.

    Thanks for the effort.

  • Kim Guanzon
    Oct 11, 2008

    Is it possible to create a multi column div that drops down from each category like johnlewis.com?

  • Alek
    Oct 13, 2008

    Very good tutorial. Nice and simple.

  • Delhi City India
    Oct 14, 2008

    Hey,
    Great Job……
    Nice tutorial

  • Nathan Wong
    Oct 14, 2008

    Kim: Yeah, you could use a div instead of an unordered list for the dropdown part and you should be able to float within it without too much trouble. It would take some changes, but overall wouldn’t be too hard. Post a comment up if you try and can’t get it working. :)

  • new york web design company
    Oct 15, 2008

    hi. this really helped me out a lot. i am happy.

  • David Simmer
    Oct 15, 2008

    Nicely done. Minor nitpick: we should add visual “flair,” unless the menu is intended to light on fire, in which case “flare” would work :)

  • shubelal
    Oct 17, 2008

    Nice work I am going to use this. thanks

  • James Curran
    Oct 17, 2008

    Now, is this just me?

    I can view this page fine in IE, but in FireFox I can see the comments, but not the article itself.

  • Cam Peterson
    Oct 17, 2008

    Nathan, I love the tutorial and find it working well with Safari and Firefox. I am having a bit of trouble with Internet Explorer. When using the javascript, it bumps the text nested in a div out of its way. In FF and Safari the dropdowns show up over the text. Any thoughts? I am using it at http://www.aviationutah.com.

    Thanks,
    Cameron Peterson

  • Fred Campbell
    Oct 19, 2008

    Thank you so much for such a clear and concise tutorial.

  • Nathan Wong
    Oct 22, 2008

    Cam: What version of IE? I only have access to IE7 at the moment and it’s looking fine for me. Or have you fixed it yourself? Thanks for the kind words. :)

  • MaxBidAuctions.Com - Online Auctions
    Oct 27, 2008

    This is Great Creating Dropdown Lists will come in handy, when we create our favorite Links Page!

    Thanks
    BOB

  • Shaun
    Oct 28, 2008

    Hey, first off this is a really good example of a drop down. Very simple, very solid and very easy to alter.

    But I’m having an issue with the popup sometimes showing behind content on the page. Is there any way of changing the z-index so it’s always in front?

    Thanks
    Shaun

  • Shaun
    Oct 28, 2008

    Ignore me, it was very simple, in case anyone else has a simular issue. Just add a high number (eg. z-index:10) to the CSS and it will always be in front. If you have flash files don’t forget to set your Flash files to wmode=”transparent”. Everything should work fine and dandy.

  • Nathan Wong
    Oct 29, 2008

    Glad you found a solution, Shaun, and thanks for sharing with the rest of us. :)

  • ryu
    Oct 30, 2008

    Really cool…
    Keep it up !!

  • indi_sign
    Nov 14, 2008

    :)
    This is great tutorial, but why to use jquery if you can make exactly the same effect/stuff with pure html and css, which will be accessible all the time, with enabled/disabled JS.

    Great tut anyway, helps a lot to understand the basics of jQuery.

  • Nathan Wong
    Nov 19, 2008

    It’s that IE doesn’t support the CSS :hover pseudo-element on anything but anchor tags. The JS is used to make IE work. I know, it’s disappointing we can’t just use CSS, but that’s the hand we’ve been dealt. :) Glad you like it!

    - Nathan

Leave a Comment