Easy to Style jQuery Drop Down Menu Tutorial

Written by Kevin Liew on 10 Nov 2009
193,267 Views • Tutorials

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
kevin Admin 13 years ago
it should look like this:

1. $(document).ready(function () {
2.
3. $('#nav li').hover(
4. function () {
5. //show its submenu
6. $('ul', this).show();
7.
8. },
9. function () {
10. //hide its submenu
11. $('ul', this).hide();
12. }
13. );
14.
15. });
Reply
Jimmy 13 years ago
Ahh, thanks. Simple misstake by myself. Thanks for the quick reply!
Reply
Fritz 13 years ago
How? ~ do I hover over a link and have the menu appear? I get the rest.
Also someone said, "And if you use a class instead of an ID, you can replicate the menu many times in the page."
I want to use links to skip down the page. I'm using both : example [ <div class="content" id="1."><h2>1.</h2> ] Do I need to get rid of the class?
Reply
Kevin Liew Admin 13 years ago
Hi Frizt, yes, i think if you use class and same html structure, you should able to make it multiple instances.
Reply
sonico 13 years ago
hi, i have a problem, in internet explorer 8, the down menu stay fixed and error of javascript (tagName Null) Exist any solution? Sorry my bad speak. Thank You
Reply
Kevin Liew Admin 13 years ago
does the demo work in IE8?
Reply
sonico 13 years ago
In IE8, the demo not work. Only for chrome and firefox no? Any solution?
Reply
Pascal 13 years ago
Very easy to set up! i do really like it!
works on al browsers ecxept firefox it flickers and i can't find the problem...
Reply
Kevin Liew Admin 13 years ago
hmm, I tested on my firefox, it's fine. Try to eliminate paddings or margin to see if it solve it.
Reply
Adam 13 years ago
Yea it does flicker in your demo as well. if you roll off and on quickly vertically it will flicker in an endless loop
Reply
Kevin Liew Admin 13 years ago
put $('ul', this).stop(true, true).slideUp(100); that should fix it.
Reply
Jonny 13 years ago
brilliant! that fixed my firefox flicker problem perfectly. thank you. however i made it like this:

//show its submenu
$('ul', this).stop(true, true).slideDown('fast');
},
function () {
//hide its submenu
$('ul', this).stop(true, true).slideUp('slow');
Reply
Anwar 13 years ago
Great tutorial, I've used on one website, it's working perfect. Still for the people who are looking to implement this don't forget to add display:none; to UL tag.
Reply
Omer 13 years ago
Freaking Simple :)

Simpler is Better :D ... good work
Reply
phpsol 13 years ago
Dan 13 years ago
Hi, just wanted to say thanks for your script. I've been playing about with the Java for this and found it quite hard for some reason! Still, now it should be sorted - will definitely use the code again too.

Dan
Reply
Apple 13 years ago
thanks bro it really worked...........
Reply
Thomas Duperre 13 years ago
Need assistance. How can I, using this script, create a centered nav bar with submenus showing items both on top and on the the bottom?
Reply
steve 13 years ago
Brilliant, nice and simple ! Just used it on my new flght case website. www.3d-flghtcase.co.uk
Reply
Dave 13 years ago
Hi
This is great but I want the parent menu item to stay 'selected' when you hover over one of its submenu items. At the moment when you rollover the submenu items the parent item has returned to its old colour. Any ideas?
Reply
dave de 13 years ago
Exactly! me too!

i have been searching for a lonnnnggg time to figure out how to do this from scratch
Reply
Kevin Liew Admin 13 years ago
There is one way to do it, put a class for all the submenu... and then:

$('ul.submenu').hover(

function () {
$(this).parent().addClass('active');
},
function () {
$(this).parent().removeClass('active');
}

);

of course, you will need to style the active class... I haven't tested it, hopefully it will work.
Reply
Dave 13 years ago
thanks so much for putting this together. I've put the code in with the rest of the jquery code.
bit stuck as to how I add a class for all the submenu...? i know its in the css but is it a new class or part of the #nav ul class already there...? if you could put an example i would be truly grateful :)
Reply
Mike 13 years ago
Hi Dave, I was having the same problem as you and I asked my brother about it and he told me to do this and it worked :)
css
ul.submenu {
}
.active{
color:#fc0 !important; /*
}

javascript
$(document).ready(function () {

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

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

function () {
$(this).parent().find('a').first().addClass('active');
},
function () {
$(this).parent().find('a').first().removeClass('active');
}

);

});

html
<ul id="nav">
<li><a href="#">Item1</a>
<ul class="submenu">
<li><a href="#">Item1.1<a/></li>
</ul>
</li>
</ul>

I hope this helps :)
Reply