Tutorials

Easy to Style jQuery Drop Down Menu Tutorial

Written by Kevin Liew on 10 Nov 2009
159,507 Views • Shares
150 comments

Introduction

Alright, this time, we are going to make a drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it.

To style it into your own design, you just have to modify the a tag CSS style. You can put background images, hover effect and also change the submenu popup animation.

Before we start, I have had made quite a few of tutorials about menu, the following is the list, I guess you might be interested with some of these :)

As usual, we will start with HTML, CSS and finally Javascript.

Advertisement

1. HTML

This would be the most common way to structure a list menu. It would make sense even if the CSS is disabled.

<ul id="nav">
	<li><a href="#">Parent 01</a></li>
	<li><a href="#" class="selected">Parent 02</a>
		<ul>
			<li><a href="#">Item 01</a></li>
			<li><a href="#" class="selected">Item 02</a></li>
			<li><a href="#">Item 03</a></li>
		</ul>
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 03</a>
	<ul>
		<li><a href="#">Item 04</a></li>
		<li><a href="#">Item 05</a></li>
		<li><a href="#">Item 06</a></li>
		<li><a href="#">Item 07</a></li>
	</ul>			
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 04</a></li>
</ul>

<div class="clear"></div>

2. CSS

CSS is quite simple, we have to style two UL List - parent menu and submenu. We put float left for the parent menu so that all the list item would display inline. For the submenu, it's hidden by default, and will only display on mouse over event.

body {font-family:arial; font-size:11px;}
.clear {clear:both}	
/* remove the list style */
#nav {
	margin:0; 
	padding:0; 
	list-style:none;
}	
	
	/* make the LI display inline */
	/* it's position relative so that position absolute */
	/* can be used in submenu */
	#nav li {
		float:left; 
		display:block; 
		width:100px; 
		background:#ccc; 
		position:relative;
		z-index:500; 
		margin:0 1px;
	}
		
	/* this is the parent menu */
	#nav li a {
		display:block; 
		padding:8px 5px 0 5px; 
		font-weight:700;  
		height:23px; 
		text-decoration:none; 
		color:#fff; 
		text-align:center; 
		color:#333;
	}

	#nav li a:hover {
		color:#fff;
	}
	
	/* you can make a different style for default selected value */
	#nav a.selected {
		color:#f00;
	}
	
		/* submenu, it's hidden by default */
		#nav ul {
			position:absolute; 
			left:0; 
			display:none; 
			margin:0 0 0 -1px; 
			padding:0; 
			list-style:none;
		}
		
		#nav ul li {
			width:100px; 
			float:left; 
			border-top:1px solid #fff;
		}
		
		/* display block will make the link fill the whole area of LI */
		#nav ul a {
			display:block;  
			height:15px;
			padding: 8px 5px; 
			color:#666;
		}
		
		#nav ul a:hover {
			text-decoration:underline;	
		}

/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
	margin:0 0 0 -2px;
}

3. Javascript

This could be one of the most simplest jQuery scripts. We are using hover mouse event and just the most basic jQuery animation slideUp and slideDown. :) I love jQuery

$(document).ready(function () {	
	
	$('#nav li').hover(
		function () {
			//show its submenu
			$('ul', this).stop().slideDown(100);

		}, 
		function () {
			//hide its submenu
			$('ul', this).stop().slideUp(100);			
		}
	);
	
});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

150 comments
Rick Cosmos 7 years ago
The menu is great - thanks a million, but I've got a project I want to use it in but the submenus are different widths. Any advice on how to handle that?

R
Reply
raymond 6 years ago
create a class for each width, and apply it to the sub menu that needs a custom width.
Reply
Mitch 7 years ago
wont work in IE anyone experience this
Reply
alu 6 years ago
it's really not good for crossBrowser and smoothness. i disappointed with this...
Reply
FunkyCoder 6 years ago
Just getting started with jQuery. Wanted a simple dd menu I could use in a Coldfusion 9 ecommerce web app. This was by far the easiest to figure out and customize of the dozen or so I looked at. Thanks so much for your efforts to create this and your willingness to give it away. Much appreciated! I basically only needed one button with 5 link buttons dropping down from it. The visible button has a much narrower label than the others dropping down from it on hover so I made two different sizes of buttons in Fireworks and plugged them in. After centering them they look fantastic. There's one button sitting in the middle of the cart with five options dropping down from it on hover. Totally cool. A real space-saver. This doesn't just look cool, it's also a very efficient use of space. Thanks, again.
Reply
FunkyCoder 6 years ago
Problem: The dd menu works great. But I have a link to print the page the menu is on as an li in the ul (onclick="window.print(); return false;"). Everything works fine except in Chrome when you return from the print preview page the drop down menu is in the slide down state and will not slide up without a page reload. Any ideas? Thanks.
Reply
Valikonen 6 years ago
Simple is good!
Reply
Obmon 6 years ago
I''m trying to add imagine rollover effect to this script using:
<li><a href='/about.php'><img src='images/nav/about_up.png' onmouseover="this.src='images/nav/about_active.png'" onmouseout="this.src='images/nav/about_up.png'" /></a></li>

The image rolls over, but the submenu (also rollover images) stay hidden and doesn't show.. suggestions?

Thanks for the script by the way..
Reply
Kevin Liew Admin 6 years ago
I thnik the image mousover event hijacked the drop down menu hover event. You can do the mouse over images using CSS instead of Javascript by setting it as background, and use the CSS pseudo code :hover to do the hover. That possibly would solve the problem.
Reply
raymond 6 years ago
A couple of adjustments for anyone have issues:

To force the menu to show above other content (when this is an issue), add a z-index: 999; to the sub menu's ul css.

Also, to smooth things over with the jquery and to prevent errors where the menu stops sliding out halfway through the animation and stops functioning correctly until the page is reloaded (happens if you mouse over, then off really quick) add true, true to the stop functions, like this:

$('ul', this).stop(true, true)

With those adjustments, it's worked great for me! Thanks for the tutorial!

Reply
Truth 6 years ago
Thank You, man! You saved my time! :)
Can I offer you a cup of coffee ? Hehe
Reply
jhochgreve 6 years ago
Even seasoned coder forget about the Z-index, and I am unfortunately one of them. I was Really close to going back and recoding the menu from scratch. Glad I checked the blog first. Good job catching this....yeeshhh! :)
Reply
James 6 years ago
Thanks, this fixed the problem I was having!
Reply
kove 6 years ago
could you explain me your script ? I'm new to javascript and jQuery, i'm trying to understand. The thing I understand less is the stop() function, what is the use of that ?
Reply
Kevin Liew Admin 6 years ago
Hi Kove, stop() is to terminate all the running animation before starting a new one. You can refer to the comment below (raymond)
Reply
Zee 6 years ago
Hi, I am new in this field please tell me where i put the jquery in page.
Reply
Kiran 6 years ago
Thanks for posting. Great blog you have here, I am following your blog, please keep posting
Reply
Stacy Davis 6 years ago
I like your drop down tutorial! I've also made a simple drop down tutorial, with some step-by-step instructions to explain what's going on- http://stacydavisdesign.com/blog/?p=20
Reply
Fabio Silva - Brazil 6 years ago
Great tutorial.

How do I increase the size of the sub menu adjusting the content?
Reply