Tutorials

Easy to Style jQuery Drop Down Menu Tutorial

Written by Kevin Liew on 10 Nov 2009
165,667 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
lalit 8 years ago
NIce...I like it
Reply
Amy 8 years ago
Thank you for sharing.....saved me stress!
Reply
Marvio Rocha 8 years ago
Very nice, i would like see a tutorial with wordpress menu dropdown.

Thank you
Reply
Prabhu 8 years ago
Thanks for the great plugin. Is it possible to make this work on ".click" instead of ".hover"? I tried but didn't work. Please help!!!
Reply
Kevin Liew Admin 8 years ago
$('#nav li').click(
if ($(this).children('ul').is(':vivisble') {
$('ul', this).slideDown(100);
} else {
$('ul', this).slideUp(100);
}
);

not sure if it will work, I have not tested it.
Reply
Prabhu 8 years ago
Thank You Kevin. I'm sorry, it didn't work :-(
Reply
Tom 7 years ago
This often happens when you haven't imported the jquery library properly (as it is trying to do what you've asked with javascript)
Reply
interTECH 8 years ago
First I want to thank you for the great tutorial. I has helped me complete a project. Thank you for sharing!
Reply
tko 7 years ago
Sweet and simple, this is great, thanks a lot.....
Reply
Abid khan 7 years ago
Thanks queness.com i needed this Drop Down.
Reply
Vijay 7 years ago
Hi, Thanks for wonderful article. I am facing one issue, In my case menu dropdown is not coming, when I click on menu, then it is giving em error in JS console."event is not defined". Please solve it
Reply
Adil Badshah 7 years ago
Excellent post, it is really very simple and helpful. It helps me alot and i made it to bookmark.
Reply
Ibnu 7 years ago
Hi friend,

I really want to say you are good. Your tutorial give me an idea to make a program. I need jquery menu dropdown as simple as possible. I like this.
Reply
Ian Haney 7 years ago
How do I have a sub menu coming off a sub menu if that makes sense
Reply
ben 7 years ago
I could not get this working at all, been at it all day. I was wondering if I messed something up whilst adapting it to make it work on my site, so I created a new blank site and copied all of this info straight in, and it still doesn't work? Anyone else realized this?
Reply
Kevin Liew Admin 7 years ago
Please download the demo instead of copy and paste the code from the tutorial. :)
Reply
Fraze 7 years ago
Love the script. One small issue. In IE 7 - the drop down menu falls behind the content area. To be clear, in IE 7, the menu falls behind the image in the content area. Do you know how to make the drop down overlap the content div? I tried playing with z-index and positioning, but no luck.... any advice?? Thanks again
Reply
Kevin Liew Admin 7 years ago
hmmm, did you set the z-index to #nav? also, put position relative also.
Reply