Sexy Drop Down Menu w/ jQuery & CSS
- Posted in TUTORIAL
- 179 Comments »
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
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.
This is what it looks like when javascript is disabled:
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.
Very smooth, and looks easy to implement. I also like how it degrades nicely with javascript turned off.
When i disable javascript in my browser, i see no spot of the submenus.
Apart of this, a great work.
+1 its indeed awesome. nice work.
nice face ^_^
ugly face ^_^
Yes, with javascript turned off, you will not see the submenus, but the primary links still work.
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”);
});
});
nothing
Very nice :)
thanks ,
I love the animation, but not so much the small arrow. Too easy to miss! Could you show a version with only rollovers?
Very nice tutorial Soh. Thanks.
nice dd menu, thanks for the tut..
I love It :) thanks for sharing
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.
waaay easier and more elegant done in Flash(TM)
Lets see iQuery and CSS do easing
Flash is stupid. Enjoy paying for your proprietary runtime!
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!
jQuery does do easing…
Nice tut, thaks a lot
Using a proprietary, non-accessible, non-indexable plugin for your main menu is just plain old stupid, sir!
Also: jquery.easing.js
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.
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!
li:hover will not work in IE6.
That doesn’t bother me so much. But you can easily add the hover behavior htc file in an IE6 stylesheet.
looks wonderful, thx for sharing
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?
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.
wickedness. Love the drop down. Very clean and fluid.
Also, you could add the tags to the parent item with jQuery, instead of leaving it blank in the HTML.
Good tutorial!
I agree with argie… great but a bit unintuitive.
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.
Love it!
.. Fails without using a mouse. You can’t tab through the subnavigation!
:P
Hmmm, looks interesting. I might use this for my new site. What about multi level menu with subcategories and stuff?
Use outline:none; on your links, it will give the menu a bit cleaner look.
Yeah it looks nicer, but it also takes away any visual clue for people navigating with the keyboard.
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
a:focus{outline:none} will get rid of those annoying outlines the browser creates around clicked links.
Woah. Beaten to the punch.
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
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.
Actually Stu Nicholls has built dozens that work across the board, css only, accessible, and work fine in IE.
nice and simple to use … very handy … thnx for sharing ..
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.
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.
Awesome effect. I love it.
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.
very nice… thanks
Nice navigation, thanks for share.
Doesn’t work in Opera
Who cares.
99.999% of the world doesn’t live in Sweden.
Opera is norwegian.
Awesome tutorial, this is a great nav example! Nice work. :D
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.
My thoughts exactly. I’ll be sure to change this behavior when I use this code on my next project ;)
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.
Looks great, I like the smooth animation. Thanks for share.
It’s about time someone posted this much needed tutorial. Please, more tutorials on interface effects that are actually used.
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 also has issues with older browser like IE6 (li:hover does not work in older browsers). I used jQuery to overcome these issues, and for it to work in all major browsers (Firefox, IE6-8, Opera, Chrome, Safari).
I did how ever have mentioned that those who have js disabled, will be still able to cruise the navigation without a problem (w/out the sub nav). Please see notes above~
I also do not recommend doing this flash (for the comments above). If the user does not have a flash player or the latest version, they would miss your main nav, and on top of that search engines will pass right over them as well.
Thanks again for this opportunity Noura, and learning experience by the great comments from readers!
Thanks Soh for this great tutorial. We would love to see more tutorials having such elegant and stylish effect from you :)
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 =]
window.open(’www.google.com.sg’)>
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.
excellent tutorial…thanks for sharing this ;)
Very nice tutorial, good work, Soh!
COOOOOOOOOOOOOOOOOOOOL!!!!!
Nice.Thank you.
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!
jquery nicely used…..awesome dropdown
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.
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
soooo nice Soh. The “hover” implementation variation is fantastic, and really intuitive.
Yea, it’s really so very intuitive indeed. And creative!!
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.
A bit slow for me … other than that ist very nice.
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.
That is annoying!
Wow… Nice Drop Down…. Nice Share…
nice..
I can’t see his demo. Im using Safari 4 and javascript is enabled.
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….
“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.
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?
Can I use this dropdown commercially?
Beautiful !!!
loved this !!
very nice menu.
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?
Very nice menu. Good job
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.
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!
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!
Very nice. Thank you!
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() {
}, function(){
$(this).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”
});
});
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)
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 :)
This is really awesome!! thanks for sharing :)
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.
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 but make a huge gap between the level one navigation items where the image should be.
Anyone have an idea why this is happening or why MSIE or FF is interpreting this differently? oR does anyone have a workaround with the code?
Here is the full code. Keep in mind the css is unchanged (havnt got to formatting for site yet)and i am using the latest jquery. one other weird thing. i noticed that if i look at the source code from my site the (”"); is showing up as color coded. but on the demo page it is not. i am using SilverStripe CMS if that helps too. :
Home
Tutorials
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Resources
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
About Us
Advertise
Submit
Contact Us
$(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”
});
});
THANK YOU FOR ANY HELP!!!!
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.
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.
How can i change the height of the submenu?
This is pretty awesome. I’ll be using it alot!
Thanks!
Hi,
How does one retain the hover state on the topnav as one browses on the subnav?
Thanks.
Nick
very nicely explained thanks… :)
I was looking for a menu like this. Nice work!
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.
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
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
//
//
//
Simply beautiful… beautifully simple!
Please give me the link to download this
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
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
fuck, the menu doesnt work
chk and mail me back
nice menu… :-bd
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!
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.
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 simple code shouldn’t have a problem, but clearly there is some sort of issue.
I you probably don’t have any experience in using MochiKit and jQuery together (because normally you wouldn’t need to do that), but any suggestions would be greatly appreciated.
Thanks!
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. :(
Fixed it. It was just a property in the CSS file that was conflicting. All is good. Thanks again for this great menu code!
Very Nice Drop Down Menu!
Thanks for best menu out there in my opinon.
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!
Hi,
Where we can download the images that are used in this example?
Regards
Zack
Interesting, but seems a bit un-user-friendly.
Gracias!! exelente sitio
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. . .
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.
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
Thanks for the tutorial. Will definitely play around with what you got here! Nice work!
wow, its really cool, but it is not 508 compliant, it does not work when Jaws is reading the link :(
Its pretty good i like it
Thanks for this… really nice work!
Useless without download link
Beautiful Work. When I hover over the menu the submenu goes below my form. Can somebody please tell me how to fix it.
Mike
Nice tutorial, I can wait to try this out.
very nice tutorial…
this gonna work on my project :]
thanks for sharing this tutorial
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.
Awesome Menu i love it
keep sharing
Awesome!
Is it possible to show the ‘ARROW’ selected when ‘TUTORIAL’ is clicked and we are on ‘TUTORIAL’ page?
Very Helpful.
definitely I will use for my website designs…
Thanks u so much..
awesome tutorial !
For those of us who don’t know…where are we putting the jQuery stuff? does it go in its own document with a pointer in the heade of the other document or what?
Brilliant – for designers and front end dev this stuff helps a lot – thanks
very nice…
yeah, really sexy :) I like it very much..
simple and nice…I used it
Thanks,