Tutorials

Easy to Style jQuery Drop Down Menu Tutorial

Written by Kevin Liew on 10 Nov 2009
160,477 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
David A. Melton 6 years ago
This was a huge help! Thanks for getting me started with something very simple. I added a bit of code to get n-level sub menus working and added support for jqueryui and the current theme. Great stuff... let me know if you want the 4/5 likes of codded I added.
Reply
Michael 6 years ago
Hi David

I have been looking for a clean way to manage multi-level menus and your comment seems to fit. Could you possibly share your updates so I can try them? Thanks
Reply
alvydas 6 years ago
thank you!!!
Reply
Harini Ethimex 6 years ago
it looks great! simple and awesome thanks for sharing this post
Reply
Ravi Kiran 6 years ago
It’s really very useful for all. Good work. Thank you so much.. & this web blog is very nice i love it http://www.apentertainmentnews.com/
Reply
Adam Gordon 6 years ago
Tried this. Seemed simple but when you wave the cursor back and forth over two of the Parent links the animation sticks and doesn't fully slide down until you reload the browser window. :/
Reply
roee 6 years ago
seriesly ppl should stop support IE lower than 9.
its popularity is already 12% and dropping down very quick, i found my self sometimes spending hours for this usless browser
Reply
anjali 6 years ago
adam is right when the cursor is moved around the links dorpdowns are not woriking out
Reply
Brad 6 years ago
Great job. I added a click handler in an attempt to make it compatible with touch devices. Click works, but if you click the background of a dropped down ul the drop down starts flying up and down at warp speed. Any idea how to implement an onclick? http://www.hcca.org
Reply
Kevin Liew Admin 6 years ago
You can change javascript line 3 to 13:


$('#nav li').hover(
function () {
//show its submenu
$('ul', this).stop(true, true).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).stop(true, true).slideUp(100);
}
);
Reply
janewb 6 years ago
thanks so much! well laid out tut! will this work on a mobile site? I'm doing a RWD portfolio
Reply
Longmatch 6 years ago

How to change menu or submenu's width based upon the contents?
This is nice easy tutorial. Just want to know how to change menu or submenu's width based upon the contents inside the menu. For example, [New products] menu should be long enough to avoid text wrapping. Thanks
Reply
M 6 years ago
Hi, I have 2 drop downs (<select>) and a submit button on my form. They display on 3 lines. However, my requirement is they display adjacent to each other - on the same line. How would I do this? Thanks in advance.
Reply
LONGMATCH 6 years ago
This plugin works fine at the first load. But the submenu does not slide down or the submenu item cannot show up when navigating to different pages back and forth. Temporary solution is to click Home button, but it does not always work. Please advice. Thanks
Reply
Jenny Beaumont 5 years ago
Hey, thanks for sharing, this is very cool! The only thing I'm having trouble with is that it doesn't seem to work on the first rollover. It takes rolling over twice to get the animation to kick in. Any idea where that might come from?

best,
-jennyb
Reply