Easy to Style jQuery Drop Down Menu Tutorial

Easy to Style jQuery Drop Down Menu Tutorial


Easy to Style jQuery Drop Down Menu Tutorial

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

147 comments

Dan
Mon, 21st March 2011
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
Tue, 3rd May 2011
thanks bro it really worked........... Reply
Thomas Duperre
Tue, 10th May 2011
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
Tue, 10th May 2011
Brilliant, nice and simple ! Just used it on my new flght case website. www.3d-flghtcase.co.uk
Reply
Dave
Fri, 20th May 2011
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
Thu, 26th May 2011
Exactly! me too!

i have been searching for a lonnnnggg time to figure out how to do this from scratch Reply
Kevin Liew Admin
Sun, 29th May 2011
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
Wed, 1st June 2011
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
Tue, 14th June 2011
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
Lacey Brown
Wed, 8th June 2011
I enjoyed doing this tutorial. Thank you. Reply
Richard Bonn
Sat, 18th June 2011
Thank you for this easy to understand tutorial about jQuery. All of the tutorials in this series are so helpful. I especially like that you include HTML, CSS and Javascript. Reply
Mani
Tue, 21st June 2011
Thanks for this awesome tutorial loved it ( life saver ). I need help with a glitch, when you hover over the menu
and then you go down to the drop down menu, then hover out and quickly hover back in it blinks like crazy.
I know an end user might not do that exactly but perhaps by accident they might end up seeing something horrible. Reply
Kevin Liew Admin
Wed, 22nd June 2011
I can't replicate your problem :/.. could be the gap between top nav and sub menu, if yes, you might have to reduce it. Reply
Tony Måseskjær
Sun, 26th June 2011
At http://www.webdevout.net/test?02K - why do the dropdown menus flicker 1px to the left once you hover off the main links?

Thanks in advance!

Tony Reply
tim
Thu, 7th July 2011
Greate article. Can you explain the theory behind why the sublist hides when you unhover from the parent? Reply
Kevin Liew Admin
Sun, 17th July 2011
change this $('ul', this).slideDown(100);
to $('#nav ul', this).slideDown(100);

same thing for the next one. Reply
Rich
Fri, 29th July 2011
For me, I was getting some strange behaviour because the slide up / down functions were getting called too often if you rapidly moved the mouse over the menu items. This code solves that: http://pastebin.com/DzamVHfq Reply
BP
Sun, 19th August 2012
I encountered this problem too. Thanks for that! :) Reply
Jeff
Mon, 1st August 2011
Thanks, It's awesome. but I was wondering if it's possible to make it multilevel? I mean another <ul></ul> within the first one. Reply
Kevin Liew Admin
Mon, 1st August 2011
Hi Jeff, unfortunately, it's only limits to 2 level. If you want a more robust drop down menu, try superfish:
http://users.tpg.com.au/j_birch/plugins/superfish/ Reply
George
Mon, 29th August 2011
The best drop down menu. Reply
parag
Fri, 30th September 2011
the menu works perfect in mozilla ie8. but in ie7 the menu hides behind any division put below it. please help Reply
Michael
Wed, 5th October 2011
Works on both Firefox and Safari but NOT on Chrome or IE 9 Reply
Michael
Wed, 5th October 2011
Ah, the demo works in these browsers so I need to get to the bottom of why it does not work for me. Reply
Arun
Sun, 9th October 2011
Sir cud u please explain
y dat it doesnt work on aspx page...?
Please help.. Reply
Kevin Liew Admin
Thu, 13th October 2011
Not quite sure Arun, as server side language shouldn't affect the script. You need to make sure you have all the scripts in place and no conflict with other scripts. Reply
Pandora
Mon, 31st October 2011
Hi,
Thanks for this - this is a great script. I do have one question: I'm trying to turn the menu into a completely vertical one, meaning that both levels are aligned vertically (and level 2 opens on top of level 1). This works great on every browser except, of course, IE, where the 2nd level opens under the 1st. I assume this is a z-index issue, but I haven't been able to fix it. Do you have any ideas? Is this even possible? Thanks! Reply
lalit
Mon, 12th December 2011
NIce...I like it Reply
Amy
Tue, 27th December 2011
Thank you for sharing.....saved me stress! Reply
Marvio Rocha
Wed, 4th January 2012
Very nice, i would like see a tutorial with wordpress menu dropdown.

Thank you Reply
Prabhu
Tue, 13th March 2012
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
Wed, 21st March 2012
$('#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
Mon, 26th March 2012
Thank You Kevin. I'm sorry, it didn't work :-( Reply
Tom
Wed, 1st August 2012
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
Fri, 16th March 2012
First I want to thank you for the great tutorial. I has helped me complete a project. Thank you for sharing! Reply
tko
Sun, 29th April 2012
Sweet and simple, this is great, thanks a lot..... Reply
Abid khan
Fri, 1st June 2012
Thanks queness.com i needed this Drop Down. Reply
Vijay
Sat, 2nd June 2012
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
Wed, 20th June 2012
Excellent post, it is really very simple and helpful. It helps me alot and i made it to bookmark. Reply
Ibnu
Fri, 22nd June 2012
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
Mon, 25th June 2012
How do I have a sub menu coming off a sub menu if that makes sense Reply
ben
Fri, 29th June 2012
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
Sat, 22nd September 2012
Please download the demo instead of copy and paste the code from the tutorial. :) Reply
Fraze
Mon, 9th July 2012
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
Sat, 22nd September 2012
hmmm, did you set the z-index to #nav? also, put position relative also. Reply
Rick Cosmos
Thu, 2nd August 2012
The menu is great - thanks a million, but I've got a project I want to use it in but the submenus are different widths. Any advice on how to handle that?

R Reply
raymond
Tue, 25th September 2012
create a class for each width, and apply it to the sub menu that needs a custom width. Reply
Mitch
Fri, 10th August 2012
wont work in IE anyone experience this Reply
alu
Wed, 29th August 2012
it's really not good for crossBrowser and smoothness. i disappointed with this... Reply
FunkyCoder
Wed, 12th September 2012
Just getting started with jQuery. Wanted a simple dd menu I could use in a Coldfusion 9 ecommerce web app. This was by far the easiest to figure out and customize of the dozen or so I looked at. Thanks so much for your efforts to create this and your willingness to give it away. Much appreciated! I basically only needed one button with 5 link buttons dropping down from it. The visible button has a much narrower label than the others dropping down from it on hover so I made two different sizes of buttons in Fireworks and plugged them in. After centering them they look fantastic. There's one button sitting in the middle of the cart with five options dropping down from it on hover. Totally cool. A real space-saver. This doesn't just look cool, it's also a very efficient use of space. Thanks, again. Reply
FunkyCoder
Thu, 13th September 2012
Problem: The dd menu works great. But I have a link to print the page the menu is on as an li in the ul (onclick="window.print(); return false;"). Everything works fine except in Chrome when you return from the print preview page the drop down menu is in the slide down state and will not slide up without a page reload. Any ideas? Thanks. Reply
Valikonen
Tue, 18th September 2012
Simple is good! Reply
Obmon
Sat, 22nd September 2012
I''m trying to add imagine rollover effect to this script using:
<li><a href='/about.php'><img src='images/nav/about_up.png' onmouseover="this.src='images/nav/about_active.png'" onmouseout="this.src='images/nav/about_up.png'" /></a></li>

The image rolls over, but the submenu (also rollover images) stay hidden and doesn't show.. suggestions?

Thanks for the script by the way..
Reply
Kevin Liew Admin
Sun, 23rd September 2012
I thnik the image mousover event hijacked the drop down menu hover event. You can do the mouse over images using CSS instead of Javascript by setting it as background, and use the CSS pseudo code :hover to do the hover. That possibly would solve the problem. Reply
raymond
Tue, 25th September 2012
A couple of adjustments for anyone have issues:

To force the menu to show above other content (when this is an issue), add a z-index: 999; to the sub menu's ul css.

Also, to smooth things over with the jquery and to prevent errors where the menu stops sliding out halfway through the animation and stops functioning correctly until the page is reloaded (happens if you mouse over, then off really quick) add true, true to the stop functions, like this:

$('ul', this).stop(true, true)

With those adjustments, it's worked great for me! Thanks for the tutorial!

Reply
Truth
Sat, 29th September 2012
Thank You, man! You saved my time! :)
Can I offer you a cup of coffee ? Hehe Reply
jhochgreve
Sun, 9th December 2012
Even seasoned coder forget about the Z-index, and I am unfortunately one of them. I was Really close to going back and recoding the menu from scratch. Glad I checked the blog first. Good job catching this....yeeshhh! :) Reply
James
Wed, 16th January 2013
Thanks, this fixed the problem I was having! Reply
kove
Thu, 27th September 2012
could you explain me your script ? I'm new to javascript and jQuery, i'm trying to understand. The thing I understand less is the stop() function, what is the use of that ? Reply
Kevin Liew Admin
Mon, 1st October 2012
Hi Kove, stop() is to terminate all the running animation before starting a new one. You can refer to the comment below (raymond) Reply
Zee
Fri, 19th October 2012
Hi, I am new in this field please tell me where i put the jquery in page. Reply
Kiran
Fri, 26th October 2012
Thanks for posting. Great blog you have here, I am following your blog, please keep posting Reply
Stacy Davis
Fri, 2nd November 2012
I like your drop down tutorial! I've also made a simple drop down tutorial, with some step-by-step instructions to explain what's going on- http://stacydavisdesign.com/blog/?p=20 Reply
Fabio Silva - Brazil
Fri, 21st December 2012
Great tutorial.

How do I increase the size of the sub menu adjusting the content? Reply
David A. Melton
Thu, 3rd January 2013
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
Mon, 21st January 2013
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
Tue, 8th January 2013
thank you!!! Reply
Harini Ethimex
Tue, 15th January 2013
it looks great! simple and awesome thanks for sharing this post Reply
Ravi Kiran
Sat, 26th January 2013
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
Sun, 3rd February 2013
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
Tue, 19th February 2013
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
Thu, 7th March 2013
adam is right when the cursor is moved around the links dorpdowns are not woriking out Reply
Brad
Fri, 8th March 2013
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
Tue, 26th March 2013
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
Wed, 1st May 2013
thanks so much! well laid out tut! will this work on a mobile site? I'm doing a RWD portfolio Reply
Longmatch
Mon, 19th August 2013

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
Mon, 26th August 2013
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
Sat, 31st August 2013
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
Tue, 25th February 2014
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
Jennifer
Tue, 15th April 2014
I am using the code you gave with the stop(true,true) but the hover nav is showing on page load. Ideas? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement