Tutorials

Easy to Style jQuery Drop Down Menu Tutorial

Written by Kevin Liew on 10 Nov 2009
160,467 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
Taimur Aziz 9 years ago
Very Nice Tutorial .. Saved to my snippets library
Reply
webmasterdubai 9 years ago
really nice tutorial and bookmarked
Reply
abhijeet 9 years ago
ya it is very useful tutorial
quite inspirable
Reply
BooshMedia 9 years ago
Works in all browsers so it gets my vote
Reply
sepehr 9 years ago
hi,very nice tut!
I have a problem with this!how empty queue,I use .queue([]) but after 20 or 30 time rollover and rollout the dropdown menu will not be.
how ever tanx for tut ;)
Reply
kevin Admin 9 years ago
Hi Agilius, sorry for that, please mod it to:

# $(\'#nav li\').hover(
# function () {
# //show its submenu
# $(\'ul\', this).stop(false,true)..slideDown(100);
#
# },
# function () {
# //hide its submenu
# $(\'ul\', this).stop(false,true).slideUp(100);
# }
# );
Reply
Agilius 9 years ago
nice tutorial, but the final outcome is bugged...

if you hover it quickly, you can get it to repeat to no end.
Reply
Mathias Bynens 9 years ago
Looks like there’s no fallback for users without JavaScript…
Reply
abhinav 9 years ago
very nice tutorial.
Reply
Akhilesh Sharma 9 years ago
Simple to understand and easy to integrate.
Thanks
Reply
ken the tech 9 years ago
just awesome. I can\'t wait to integrate this method onto a client website. He was asking me for a drop-down menu and I didn\'t know that can be this easy. Thanks a lot!
Reply
campolar 9 years ago
A little css mistake u got there, why does the selector: \"#nav li a {\" have 2 \"color:\" lines?
Reply
Join Smith 9 years ago
oh, thanks you with Style jQuery Drop Down Menu Tutorial
Reply