Tutorials

Sexy Drop Down Menu w/ jQuery & CSS

June 2nd, 2009

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.


View Demo of Sexy Drop Down Menu

Drop Down Menuu w/ CSS & jQuery

Step1. HTML

First create an unordered list for your base top navigation. Then simply nest another unordered list for your sub navigation.

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Step2. CSS

Next, it’s time to style the navigation wireframe with CSS.

ul.topnav {
	list-style: none;
	padding: 0 20px;	
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; 
}

Step3. jQuery

For those who are new to jQuery, you can learn about it here.

The following script contains comments explaining which jQuery actions are being performed.

$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
	
	$("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

*To degrade gracefully, we only show the drop down menu trigger to those who have javascript enabled.

Drop down menu that degrades gracefully

This is what it looks like when javascript is disabled:

Drop down menu that degrades gracefully

View Demo of Sexy Drop Down Menu

Conclusion

Note: I went ahead and added the rounded corners to the demo (CSS3 – Only supported in Firefox, Safar, & Chrome). If you would like to give it a try, check out this tutorial.

Experiment and customize this to fit your needs! If you have any questions, concerns, suggestions, or comments, please do not hesitate to let me know.

Author: Soh Tanaka

Soh Tanaka is a Los Angeles based Web Designer and blogger, who recently launched a CSS Web Gallery called Design Bombs. For more front-end web development tutorials, check out his web design blog or you can follow him on twitter @SohTanaka

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: ,

Sort by:   newest | oldest | most voted
Heather
Guest
6 years 11 months ago

Very smooth, and looks easy to implement. I also like how it degrades nicely with javascript turned off.

Rafa Garcia
Guest
6 years 11 months ago

When i disable javascript in my browser, i see no spot of the submenus.
Apart of this, a great work.

insic
Guest
6 years 11 months ago

+1 its indeed awesome. nice work.

santosh
Guest
santosh
6 years 6 months ago

I saw insic’s comments on many other blogs.
she comments almost all post on all these blogs.
I don’t know how she got that much time to read all post.

May be this just a trick to get back link to her blog.

Derrick
Guest
6 years 11 months ago

Yes, with javascript turned off, you will not see the submenus, but the primary links still work.

Alice
Guest
Alice
4 years 10 months ago

I am having problems with this navigation.

1st. If I put the first text up to the edge of template by using # in the css then my content disappears.

2nd. The topnav has a invisible bar below it so it stops the content from going any higher.How to delete it?

3rd. The hover light image does not appear with the coding.

Basically,I’m using this navigation without the drop down for my site so it would look stylist and easy to use.

nanditha
Guest
6 years 6 months ago
Although i included the jquery.js file within the header, the triger doesnt load!! can anyone figure out wat the problem could be…. the following is the jquery.js file $(document).ready(function(){ $(“ul.submenu”).parent().append(“”); $(“ul.menu li span”).click(function() { $(this).parent().find(“ul.submenu”).slideDown(‘fast’).show(); $(this).parent().hover(function() { }, function(){ $(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up }); }).hover(function() { $(this).addClass(“subhover”); }, function(){ $(this).removeClass(“subhover”); }); });
Vipin
Guest
6 years 4 months ago

$(”ul.submenu”).parent().append(“”);

span missing in the above line. it shoudl be
$(”ul.submenu”).parent().append(“span”);

cuz the menu gets activated on the click of the span.

i hope that solves the problem….

prashant
Guest
prashant
6 years 4 months ago

well said heather. Similar “sexy bookmark” like effect is nicely done without javascript. Have a look i really like this.. http://www.webdeveloperjuice.com/2009/12/15/sexy-bookmark-like-effect-using-pure-css/

yasser
Guest
yasser
6 years 11 months ago

Very nice :)

thanks ,

chris
Guest
chris
6 years 11 months ago

I love the animation, but not so much the small arrow. Too easy to miss! Could you show a version with only rollovers?

Steven Snell
Guest
6 years 11 months ago

Very nice tutorial Soh. Thanks.

Egydes
Guest
6 years 11 months ago

I love It :) thanks for sharing

Alan Moore
Guest
6 years 11 months ago

Would it not be better to have some CSS allow the drop downs to appear when the menu item is hovered over, but then have jQuery add the neat animations if JS is turned on?

Nonetheless, very impressive looking.

required? whatever
Guest
required? whatever
6 years 11 months ago

waaay easier and more elegant done in Flash(TM)

Lets see iQuery and CSS do easing

rich
Guest
rich
6 years 11 months ago

Flash is stupid. Enjoy paying for your proprietary runtime!

scifisi
Guest
6 years 7 months ago

Actually the Flash plugin for all browsers is – and has always been – free.

There is also a Flash SDK, which is free and also Flash Develop which again is completely free.

Enjoy being ignorant.

If Flash is installed and enabled use it. If JavaScript is enabled – use it!

Michael
Guest
Michael
6 years 6 months ago
Search engines will not spider your navigation link structure. Flash eats up the processing power of the cpu. You need a plugin. You would be required to check for plugin, then deliver a second menu if they don’t have the plugin. Now you’ve got two sets of data and code. There are z-index issues with flash, the nav showing up on top of modal windows etc… There are popups to update your plugin if it is out of date. These are just a few reasons flash as navigation are a user experience nightmare. I’ll also point out that no top… Read more »
James
Guest
James
6 years 4 months ago
Spiders don’t only look at your navigation link structure. Make a proper site map and you side step that whole issue. Unless your target audience are all cheap bastards and all bought their computers in the 90s, a flash menu will not eat up much processing power of a cpu at any noticeable level. Providing a second menu is no more of a hassle than whats in the above tutorial. Take the menu and link to a pages with the rest of the links. There are no z-index issues with flash. There are programmer issues with programmers not knowing how… Read more »
Firefly
Guest
Firefly
6 years 11 months ago

jQuery does do easing…

David
Guest
6 years 5 months ago

just wondering .. how is easing possible in jQuery. As I understand it, easing if you e.g. do a fade then you can make it fade slower toward the end of the fade. I would love it if this were possible in Jquery .. but I don’t think this is possible.

David
Guest
6 years 5 months ago

Never mind .. anything is possible .. just found the following link: http://gsgd.co.uk/sandbox/jquery/easing/

Miroslav
Guest
Miroslav
6 years 4 months ago
David, I’m Flash developer since 2002. and I have been in web business since 1997. When you say “how is easing possible in jQuery” you don’t understand AS and JS at all. AS is based on ECMAScript like JS and easing in Flash was able in version AS1, so sure it is possible in JS! In my opinion it is stupid to use Flash menus in HTML based sites (it always was). On other side, people, give Flash more respect while talking about it, because Flash deserves it. Most ideas and effects done by jQuery come from Flash world (see… Read more »
Dave
Guest
Dave
6 years 11 months ago

Nice tut, thaks a lot

Markus
Guest
6 years 11 months ago

Using a proprietary, non-accessible, non-indexable plugin for your main menu is just plain old stupid, sir!

Also: jquery.easing.js

Mordy
Guest
6 years 5 months ago

Does anyone still use flash?

Sean
Guest
6 years 11 months ago

When Javascript is turned off, the sub-navigation isn’t available to users with CSS.

This would be easily attainable by adding a class, styling for hover, and then removing the class with Javascript.

ul.hover li:hover ul.subnav { display:block; }
$(‘ul.hover’).removeClass(‘hover’);

Now, with only CSS, the menus drop down when we hover over a link. And if Javascript is enabled, we remove the class, so hover doesn’t mess up our new effect. And we allow an animated, clickable effect instead.

montana flynn
Guest
6 years 11 months ago

Great idea and suggestion! I am going to write about using javascript unobtrusively if your interested in helping drop me a line through my blog!

Mariusz
Guest
6 years 11 months ago

li:hover will not work in IE6.

Sean
Guest
6 years 11 months ago

That doesn’t bother me so much. But you can easily add the hover behavior htc file in an IE6 stylesheet.

Issa Qandil
Guest
6 years 11 months ago

looks wonderful, thx for sharing

argie
Guest
argie
6 years 11 months ago

looks nice but the fact that you’re supposed to click on the drop down arrow is very unintuitive. perhaps just have the drop down appear on hover?

Adam
Guest
Adam
6 years 6 months ago

argie, instead of
$(“ul.topnav li span”).click(function()
Just change it to
$(“ul.topnav li span”).mouseover(function()

Problem solved for intuitiveness.

The only thing I dont like is that the drop down doesn’t come on when you hover over the menu item itself, but rather the little arrow.

Ron
Guest
6 years 4 months ago

thanks adam

Eric Roberts
Guest
6 years 11 months ago

Also, you could add the tags to the parent item with jQuery, instead of leaving it blank in the HTML.

Good tutorial!

Alex Garcia
Guest
Alex Garcia
6 years 11 months ago

There should be a timeout for the mouseout event of the menu… It’s too easy to mouse past the last item of the menu, which results in the menu closing too early.

But otherwise, it looks nice and seems to degrade well.

Eric
Guest
6 years 11 months ago

Love it!

anon
Guest
anon
6 years 11 months ago

.. Fails without using a mouse. You can’t tab through the subnavigation!

Dragonica
Guest
6 years 11 months ago

Hmmm, looks interesting. I might use this for my new site. What about multi level menu with subcategories and stuff?

Erik Stark
Guest
6 years 4 months ago

I was curious if anyone has tried making this a multi-tiered navigation with subcategories and such. I’ve been recently trying to do this, and any help would be great.

Kai
Guest
6 years 4 months ago
Yeah, I made a subcat menu pretty easily with only minor modification. Problem is, IE does not display them correctly, but whatever. Still on it and I don’t care about IE anyhow. Just add ul class=”subsubnav” or something, then duplicate the css and jquery functions for subnav actions and it’s good to go. You’d have to modify the subsubnav css to z-index to the left or right with positive or negative left margining. I don’t know why the append span thing is in the jquery code. it makes much more sense to just do this: $(“ul.topnav li a”).hover(function() { …… Read more »
Matt
Guest
Matt
4 years 10 months ago

Kai can you post your code for the subcat menu? i’m having trouble implementing it… any luck on making it compatible with IE?

i can get the subcat menu to show but it shows when i mouseover any subitem. i want it to show only when there IS a subcat item associated to the submenu item they are hovering over.

Joel
Guest
6 years 11 months ago

Use outline:none; on your links, it will give the menu a bit cleaner look.

Joost Kiens
Guest
6 years 11 months ago

Yeah it looks nicer, but it also takes away any visual clue for people navigating with the keyboard.

justintime
Guest
justintime
6 years 6 months ago

that and not to mention IT IS visually misleading that you really have to ‘aim’ for the arrow for the dropdown.
3.2 out of 5

d00d
Guest
d00d
6 years 11 months ago

a:focus{outline:none} will get rid of those annoying outlines the browser creates around clicked links.

d00d
Guest
d00d
6 years 11 months ago

Woah. Beaten to the punch.

Eric
Guest
Eric
6 years 11 months ago

Doesn’t work if JavaScripts isn’t enabled in the client. I’m all for cool menus, but first and foremost it needs to work in all use cases.

E

Mariusz
Guest
6 years 11 months ago

I think there’s no working cross-browser dropdown menu that works without Javascript (even ye olde :hover version requires some JS to work in deprecated browsers like IE6). To make it ugly, but working in non-JS browsers, simply go for $(‘ul subnav’).hide(); on display:block’ed subnav which will not hide it in non-JS browsers.

Jake
Guest
Jake
6 years 7 months ago

Actually Stu Nicholls has built dozens that work across the board, css only, accessible, and work fine in IE.

saurabh shah
Guest
6 years 11 months ago

nice and simple to use … very handy … thnx for sharing ..

Mariusz
Guest
6 years 11 months ago

Using things like that: $(“ul.subnav”).parent().append(“”); should make you fall underground from shame, really. :^)

Enumerate children, append anchor leading to #subnav-{child_number} – voila, nice and semantic.

shin
Guest
6 years 11 months ago

It works with IE6 as well.

It might be a good idea to have hover function rather than click function on the arrows.

Some may not notice it is clickable, and visitors are used to a css dropdown menu which comes down when they hover over it.

Ariyo
Guest
6 years 11 months ago

Awesome effect. I love it.

Jamie Allsop
Guest
6 years 11 months ago

This is some really nice navigation and I like that it degrades nicely. I was thinking the same as @shin, instead of having to click on the arrow for it to drop down you just hover over it, although I do like the fact you have to click on the arrow for it to drop down I don’t think users will find it that user friendly.

Milos
Guest
6 years 11 months ago

very nice… thanks

Fausto
Guest
6 years 11 months ago

Nice navigation, thanks for share.

Steve Mulder
Guest
Steve Mulder
6 years 11 months ago

Doesn’t work in Opera

Adam
Guest
Adam
6 years 6 months ago

Who cares.

99.999% of the world doesn’t live in Sweden.

Matthew Johnson
Guest
6 years 11 months ago

Awesome tutorial, this is a great nav example! Nice work. :D

Ray Gulick
Guest
6 years 11 months ago

While I really like this, I was thrown off at first by the way it operates, which requires a click on a pretty small target area to activate the dropdown. This is so different from the expected behavior (dropdown activated by hovering over the nav item) that I thought it was broken at first. I suspect most web users would not stick around long enough to figure it out.

Mark Luker
Guest
Mark Luker
6 years 11 months ago

My thoughts exactly. I’ll be sure to change this behavior when I use this code on my next project ;)

Maverick
Guest
6 years 11 months ago

wow, a very nice looking menu. but function-wise i feel the drop down menu should open on OnMouseover instead of OnClick as users expect drop down menus to open up on hovering over the arrow.

other than that, very nice work.

Dario Gutierrez
Guest
6 years 11 months ago

Looks great, I like the smooth animation. Thanks for share.

w1sh
Guest
w1sh
6 years 11 months ago

It’s about time someone posted this much needed tutorial. Please, more tutorials on interface effects that are actually used.

Soh Tanaka
Guest
6 years 11 months ago
Hey girls/guys, thank you all for your feedback and constructive criticism~ I was actually trying to emulate the http://www.digg.com drop down menu (where you click on the arrow to the side of the nav link), but with my own twist~ The main point that I now have to agree with is the click vs hover option, which I do agree this may be a usability issue. Solution: http://www.sohtanaka.com/web-design/examples/drop-down-menu/hover.htm The code I change is below: $(this).parent().find(“ul.subnav”).stop().slideDown(‘fast’).show(‘slow’, function(){ $(this).height(“auto”); }); For those who are asking why this is not working w/out javascript, CSS does not allow any sort of animation and it… Read more »
Noupe
Guest
6 years 11 months ago

Thanks Soh for this great tutorial. We would love to see more tutorials having such elegant and stylish effect from you :)

Magdy
Guest
6 years 11 months ago

I do agree with you, This tutorial is absolutely useful and it was pretty much neat, organized, and easy to understand.

Thanks Soh for this tutorial, and thanks to Noupe for giving us that chance to see such interesting tutorials.

cheers =]

ncj
Guest
ncj
6 years 11 months ago

I like these however, I would like to see the dropdown triggered on the link and not beside the link and I do believe the dropdowns need to be keyboard accessible.

I don’t agree with whitehouse.gov’s solution to the same problem (I have no idea what technology they are using) by repeating all the links at the bottom of the page.

honour chick
Guest
6 years 11 months ago

excellent tutorial…thanks for sharing this ;)

Janko
Guest
6 years 11 months ago

Very nice tutorial, good work, Soh!

DDamir
Guest
6 years 11 months ago

Nice.Thank you.

agilius
Guest
agilius
6 years 11 months ago

Great example of Jquery usage. I enjoyed it and I see that it works well even though you click the arrow, then hover-out, then click fast again the arrow and so on.

Thanks, keep em coming!

Selvam
Guest
6 years 11 months ago

jquery nicely used…..awesome dropdown

Greg
Guest
Greg
6 years 11 months ago

What a great nav system! So simple to implement. I modified it slightly to allow the sub-nav to open up on mouse over rather than click. To do this just change

$(“ul.topnav li span”).click(function()

to

$(“ul.topnav li span”).mouseover(function()

Brilliant! Thanks very much.

colin
Guest
6 years 11 months ago

Really love this, but is there any fixes for opera i’ve been bustin my nuts tryin to work it out

cheers, keep up the good work

Archetoy
Guest
6 years 11 months ago

soooo nice Soh. The “hover” implementation variation is fantastic, and really intuitive.

Joseph Smith
Guest
Joseph Smith
6 years 11 months ago

Yea, it’s really so very intuitive indeed. And creative!!

Dream Meanings
Guest
6 years 11 months ago

The css drop down menu was pretty hot. Seems pretty easy to implement too once you have the jquery code included, then it is just a matter of editing html lists.

Benjamin Reid
Guest
6 years 11 months ago

Nice TUT, but as a few people have set, the dropdown needs to function when you click on the full button not just the arrow. From a UI point of view, it’s best just to add category page into the dropdown.

Neil
Guest
Neil
6 years 11 months ago

That is annoying!

shevaa
Guest
6 years 11 months ago

Wow… Nice Drop Down…. Nice Share…

Thomas
Guest
Thomas
6 years 11 months ago

I can’t see his demo. Im using Safari 4 and javascript is enabled.

Alex
Guest
Alex
6 years 11 months ago

Useless to me (and probably alot of other people) unless this supports a 3 or 4 multi-tier drop down list.

Which right now, I don’t see this doing….

Ty (the Web Guy)
Guest
6 years 11 months ago

“Studies show that top navigations tend to get the most visual attention when a user first visits a site.”

I completely agree, but anyone have links to studies with this conclusion? I’m working on a project that can really use this kind of supporting documentation.

Ashish
Guest
6 years 11 months ago

Very nice but two thing should be added to this:
1. It should work on click of menu text also
not only on arrow.
2. Where is the 2nd step?

Babu
Guest
Babu
6 years 11 months ago

Can I use this dropdown commercially?

robb
Guest
6 years 11 months ago

loved this !!

Jaspal Singh
Guest
6 years 11 months ago

very nice menu.

tom
Guest
tom
6 years 11 months ago

If I have a image below this menu.. is the drop down menu going to push the image down.. or is it going to overlap the image?

library book
Guest
6 years 11 months ago

Very nice menu. Good job

Robert T
Guest
6 years 11 months ago

Whoa, I didn’t even figure out how to use until I read more. It thought it was broken. I expected this to work with the cursor hovering over the button text. The fact I had to first focus on the little arrow and second, actually click on it, was very unintuitive to me.

David L
Guest
David L
6 years 11 months ago

It’s so frustrating that something as slick and stylish presents problems from a usability aspect – form should always follow function. I would have rather the author focus on making the text the active trigger, and not worry about the mouseover on the arrow. It’s a pity, and the only reason I won’t be using it for a project I have on at the moment. Fingers X’d for an update!

Hoi
Guest
6 years 11 months ago

Great menu! I have one question about using jquery tabs near the menu, however. When I click on the menu the dropdown box hides behind my jquery tabs. Do you know why that may be?

Thanks!

Jasmin Halki?
Guest
6 years 11 months ago

Very nice. Thank you!

Peter
Guest
Peter
6 years 11 months ago
I use the following modification to support drop down while just clicking on the text. Someone more knowledgeable should have a look if it can be done better. You can have both ways by just adding this code to the existing. // modified to work on click of top item $(document).ready(function(){ $(“ul.topnav”).parent().append(“”); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*) $(“ul.topnav li”).click(function() { //When trigger is clicked… //Following events are applied to the subnav itself (moving subnav up and down) // $(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click $(this).find(“ul.subnav”).stop().slideDown(‘fast’).show(‘slow’, function(){ $(this).height(“auto”); }); $(this).hover(function()… Read more »
web media
Guest
6 years 11 months ago

Hi, we are trying this script and create a custom style. Only issue remaining is IE6 will not cooperate. I hope IE6 will leave our lives very soon. Thanks for the tutorial, well done ;o)

Josh
Guest
6 years 11 months ago

Is there a download link for all of this? Images mainly, i can see the jquery and html example in the source. But i may just be missing something.

Anyone?

Thanks in advance :)

Vipul Limbachiya
Guest
6 years 11 months ago

This is really awesome!! thanks for sharing :)

nainpreet
Guest
6 years 11 months ago

Nice article. It would be even nicer if you provide the background images for download. It will help rookies like me to completely imitate what you have taught in this article.

Hello_electro
Guest
Hello_electro
6 years 11 months ago
First off: this scripts is terrific! but off course, i am facing a programming woe! so for some reason, the code works fine in MSIE (believe it or not!) but in Firefox the drop down image will not show. I noticed that in the section of the script where: $(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav it will work fine in MSIE and not FF. HOWEVER if I change: (“”); to: (“<span></span>”) the code works in FF and not MSIE. in MSIE it will leave out the drop down image… Read more »
Hello_electro
Guest
Hello_electro
6 years 11 months ago

ok, so i just realized the posting actually read the html! The issue is with using span in jquery. when using Character Entities for it shows up fine in FF. in IE it includes the span as text in the browser.

Hello_electro
Guest
Hello_electro
6 years 11 months ago

So if anyone understood what my problem was and is having the same issue (sorry, i know i was terrible at explaining the problem) the solution was pretty simple:

instead of writing the code directly in the html page, create a javascript file and call it from within the page. I think it may have something to do with using a CMS, but not sure.

Gusto
Guest
Gusto
6 years 11 months ago

How can i change the height of the submenu?

Alicia
Guest
Alicia
6 years 10 months ago

This is pretty awesome. I’ll be using it alot!
Thanks!

karthik
Guest
4 years 10 months ago

you are super……..

Nick
Guest
Nick
6 years 10 months ago

Hi,

How does one retain the hover state on the topnav as one browses on the subnav?

Thanks.

Nick

Abhishek Dilliwal
Guest
6 years 10 months ago

very nicely explained thanks… :)

Website Designer Katy, TX
Guest
6 years 10 months ago

I was looking for a menu like this. Nice work!

Richard Sweet
Guest
6 years 10 months ago

Excelent, really useful. I just changed it slightly so the menus drop when you roll over the actual link, not when you click the down arrows.

efi
Guest
efi
4 years 10 months ago

How??? Please let me know!

adrian
Guest
adrian
6 years 10 months ago
Hi all, i m newbie to this… having a blank page when tried to create the drop down menu… below are the codes where i created as .html DropDownMenu.js = Step 3 DropDownMenu.css = step 2 anything that i miss out?? Home Tutorials Sub Nav Link Sub Nav Link Resources Sub Nav Link Sub Nav Link About Us Advertise Submit Contact Us
adrian
Guest
adrian
6 years 10 months ago
oops, here are the codes:- // // // // // // // // Home // // Tutorials // // Sub Nav Link // Sub Nav Link // // // // Resources // // Sub Nav Link // Sub Nav Link // // // About Us // Advertise // Submit // Contact Us // // //
Pradeesh
Guest
Pradeesh
6 years 10 months ago

Please give me the link to download this

drifter
Guest
drifter
6 years 10 months ago

Hi

This is great!

I don’t know much about this kinda thing, but I use Joomla! CMS so. Since it loads MooTools by default it will need to be converted to work with that instead of JQuery. I’m sure it will be small changes to the JS file only. Does anyone have an idea how?

dM

Angel
Guest
Angel
6 years 10 months ago
Hello, this is a great menu….but how I am not pleased with the way this looks if you add another set of links under a subnav link. Is there a way to get rid of the bullets and the spacing between each one that makes it look pretty awful? for example this is what I have: Home A A1 1 a b 2 A2 B Sub Nav Link Sub Nav Link C D E Contact Us
JayDee
Guest
JayDee
6 years 10 months ago

This menu was extremely easy and quick to implement.

Thanks for putting this up. To add to nick’s point above, it would be nice to retain the hover state on the top navigation items while over the drop menus…

Great stuff though. Thanks!

Andrew
Guest
6 years 10 months ago

Hi are we allowed to have use this menu?

I have it on my site working great but just wanted to know if we are allowed to use it.

And thanks best menu out there in my opinon.

Stephen
Guest
Stephen
6 years 10 months ago
Fantastic and simple menu! Thanks for this. I am having a problem, though, using it with my current project. Unfortunately, I am forced to use MochiKit alongside jQuery on the current site I’m working on. So, I am using jQuery’s noConflict feature and MochiKit’s DOM like so: jQuery._$ = MochiKit.DOM.getElement; var $j = jQuery.noConflict(); My problem is that the menu works in IE, but not in Firefox (weird since it’s usually the other way around). Firefox won’t display the dropdowns at all. Any tips on how to get it to work properly in Firefox, too? I would think that such… Read more »
Stephen
Guest
Stephen
6 years 10 months ago

Okay, I know now that it’s not an issue with MochiKit and jQuery working together. Must be some sort of CSS issue, then. My CSS file is pretty big, so it’s probably going to take me a while to figure this out. :(

Stephen
Guest
Stephen
6 years 10 months ago

Fixed it. It was just a property in the CSS file that was conflicting. All is good. Thanks again for this great menu code!

Search Scripts
Guest
6 years 10 months ago

Very Nice Drop Down Menu!

Mike McAlister
Guest
6 years 7 months ago

This is a fantastic little piece of script. Just having one hangup here. Probably from my excessive customizing, but I thought I’d ask anyway in case someone has experienced the same issue.

http://sixonefivedesign.com/cleancut/

In IE6 and IE7, the menu drops fine but once you start to hover over the sub-items, the menu dies and scrolls back up. I’ve tried nearly everything I could think of, now I’m left scratching my head!

Any help would be appreciated!

zack
Guest
6 years 7 months ago

Hi,

Where we can download the images that are used in this example?

Regards
Zack

Gustavs
Guest
6 years 7 months ago

Interesting, but seems a bit un-user-friendly.

gmail
Guest
6 years 7 months ago

Gracias!! exelente sitio

Imran Ahmad Jan
Guest
Imran Ahmad Jan
6 years 7 months ago

Thanks for such a step by step tutorial. I am new to jQuery. Just also mention to create file how and where, so that who did’nt used css and jQuery ever how and where they will ceate how many files, seperate or one etc. Any how i sort it out but for others like. Thank u very much sirrr again. . .

ales
Guest
ales
6 years 7 months ago

i like this drop down menu a lot. I was trying to implement it to my website.

The only issue I face is how to get dropdown menu shown in front of cufon h1 and h2 tags (i use http://wiki.github.com/sorccu/cufon).
So when drop down menu opens and shows menu items, cufun item is showned in front and menu itmes are hidden behind.

I’ll be happy to get some tips to solve this.

novice
Guest
6 years 7 months ago

hi!
i tried your tutorial and implimented in my website. it is working properly. But, below the menu, i inserted a carousel. my problem is that, the carousel is in the top layer and the menu (specifically, submenus) when it is animating, maximum part of it is hidden below the carousel. i tried z-index in several divs, but no success.
plz help.
thank you

Mike
Guest
6 years 7 months ago

Thanks for the tutorial. Will definitely play around with what you got here! Nice work!

Zain Shaikh
Guest
6 years 6 months ago

wow, its really cool, but it is not 508 compliant, it does not work when Jaws is reading the link :(

Duane
Guest
6 years 6 months ago

Thanks for this… really nice work!

Mike
Guest
Mike
6 years 6 months ago

Beautiful Work. When I hover over the menu the submenu goes below my form. Can somebody please tell me how to fix it.

Mike

SWP
Guest
6 years 6 months ago

Nice tutorial, I can wait to try this out.

kamal
Guest
6 years 6 months ago

very nice tutorial…
this gonna work on my project :]
thanks for sharing this tutorial

Kris
Guest
6 years 6 months ago

The dropdowns go behind a SWF file on any Windows browser. Any idea on how to make it stay on top of the SWF? Z-index doesn’t appear to be working.

HeartDisk
Guest
6 years 6 months ago

Awesome Menu i love it

keep sharing

Sarfraz
Guest
6 years 6 months ago

Awesome!

Is it possible to show the ‘ARROW’ selected when ‘TUTORIAL’ is clicked and we are on ‘TUTORIAL’ page?

shawnp4h
Guest
6 years 6 months ago

Very Helpful.

definitely I will use for my website designs…

Thanks u so much..

wpDiscuz