Tutorials

Easy to Style jQuery Drop Down Menu Tutorial

Written by Kevin Liew on 10 Nov 2009
165,673 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
mrsarun 10 years ago
hey, great tut!
I'm trying to get the submenu to show as horizontal, but im not able to do it. Is there a way how to ?
Reply
kevin Admin 10 years ago
Hi mrsarun.... hmmm.... i can guide u thou...

1: u need to remove the float:left in the #nav ul li

2:u need to set the left for the submenu #nav ul to the width of ur menu...

i guess that's it... u just have to mess with CSS...
Reply
mrsarun 10 years ago
@Kevin
I'm gonna try that mate, thanks for that.
I tried alot with the css but didnt remove the float:left in the #nav ul li! Cheers!
Reply
Andy 10 years ago
This is pretty good, but it still has a major bug. If you scroll off the menu while it's closing and then quickly scroll back on the closing portion of the menu, it flickers non-stop until you mouse off. I can see that being a pretty visible issue, especially in cases where you have two menu items that have a number of subcategories. Any ideas of how to fix that?
Reply
kevin Admin 10 years ago
Hi Andy, I can't seem to regenerate the bug u mentioned above... can i know what browser are you using?
Reply
Wah 10 years ago
Hello Kevin,i have the same problem like Andy,also try your bug fix for Agilius,but still have the problem.When you quick hover to the button it will flicking no stop,do you have any bug fix for this?thanks!
Reply
kevin Admin 10 years ago
Hi Hector... u need to created a CSS class that highlight the parent item. And also you will need to use server side language (php,asp) to add that class to the parent.. depend on which page user is visiting... hope it make sense...
Reply
Hector 10 years ago
Hello
Your tutorial is really good, but I have one troble. I succed to make the submenu items to chanche colors but I want the parents change color and satay as I explore the submenu.
Sorry for my English.
chau
Reply
CsS RoCkeR 10 years ago
plz send me online jquery.js script link.
than i am copy & past in head.
Reply
Matt 10 years ago
Hi Kevin, I'm using FF3/IE7/8 and I got the same flickering problem when hovering a drop down menu, it happends on your demonstration as well, simply hover a LI and go away quickly and come back.
Can you please find a fix. WOuld be highy appreciated!
Reply
nagarajan 10 years ago
nice tutorial, now i learned how dropdown menus are working thanks lot
Reply
Kartlos Tchavelachvili 10 years ago
Sweet! Thanks :)
Reply
NBA Jerseys 10 years ago