Tutorials

Easy to Style jQuery Drop Down Menu Tutorial

Written by Kevin Liew on 10 Nov 2009
165,671 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
Lacey Brown 8 years ago
I enjoyed doing this tutorial. Thank you.
Reply
Richard Bonn 8 years ago
Thank you for this easy to understand tutorial about jQuery. All of the tutorials in this series are so helpful. I especially like that you include HTML, CSS and Javascript.
Reply
Mani 8 years ago
Thanks for this awesome tutorial loved it ( life saver ). I need help with a glitch, when you hover over the menu
and then you go down to the drop down menu, then hover out and quickly hover back in it blinks like crazy.
I know an end user might not do that exactly but perhaps by accident they might end up seeing something horrible.
Reply
Kevin Liew Admin 8 years ago
I can't replicate your problem :/.. could be the gap between top nav and sub menu, if yes, you might have to reduce it.
Reply
Tony Måseskjær 8 years ago
At http://www.webdevout.net/test?02K - why do the dropdown menus flicker 1px to the left once you hover off the main links?

Thanks in advance!

Tony
Reply
tim 8 years ago
Greate article. Can you explain the theory behind why the sublist hides when you unhover from the parent?
Reply
Kevin Liew Admin 8 years ago
change this $('ul', this).slideDown(100);
to $('#nav ul', this).slideDown(100);

same thing for the next one.
Reply
Rich 8 years ago
For me, I was getting some strange behaviour because the slide up / down functions were getting called too often if you rapidly moved the mouse over the menu items. This code solves that: http://pastebin.com/DzamVHfq
Reply
BP 7 years ago
I encountered this problem too. Thanks for that! :)
Reply
Jeff 8 years ago
Thanks, It's awesome. but I was wondering if it's possible to make it multilevel? I mean another <ul></ul> within the first one.
Reply
Kevin Liew Admin 8 years ago
Hi Jeff, unfortunately, it's only limits to 2 level. If you want a more robust drop down menu, try superfish:
http://users.tpg.com.au/j_birch/plugins/superfish/
Reply
George 8 years ago
The best drop down menu.
Reply
parag 8 years ago
the menu works perfect in mozilla ie8. but in ie7 the menu hides behind any division put below it. please help
Reply
Michael 8 years ago
Works on both Firefox and Safari but NOT on Chrome or IE 9
Reply
Michael 8 years ago
Ah, the demo works in these browsers so I need to get to the bottom of why it does not work for me.
Reply
Arun 8 years ago
Sir cud u please explain
y dat it doesnt work on aspx page...?
Please help..
Reply
Kevin Liew Admin 8 years ago
Not quite sure Arun, as server side language shouldn't affect the script. You need to make sure you have all the scripts in place and no conflict with other scripts.
Reply
Pandora 8 years ago
Hi,
Thanks for this - this is a great script. I do have one question: I'm trying to turn the menu into a completely vertical one, meaning that both levels are aligned vertically (and level 2 opens on top of level 1). This works great on every browser except, of course, IE, where the 2nd level opens under the 1st. I assume this is a z-index issue, but I haven't been able to fix it. Do you have any ideas? Is this even possible? Thanks!
Reply