Sexy Drop Down Menu w/ jQuery & CSS
- Posted in TUTORIAL
- 378 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.
A very nice Tutorial but the script isn’t working ?!
Please help :)
tunetek @gmx.de
view source page from here: http://www.sohtanaka.com/web-design/examples/drop-down-menu/ that should help :-)… If it doesn’t work you might have something buggy with your css. Try commenting out some of your css code that might help you solve the problem too
Thank you for the tutorial,
Can I make it just when the mouse hover it the drown menu works ?
Hi, Thank for the great menu.
Does this support jQuery UI?
Here is an example of your sexy menu in production! I got the hover over to work instead of having to click on the arrow.
uinsureme.com/
Thx,
Michael Giles.
Hi Michael, I can’t get my dropdown menu to display in IE6 or IE7 no matter how high I set the z-index. I see you had no such trouble. Did you have to do anything special?
thanks in advance
Tony
Can you send a link to the page you are developing? I’ll try to see what the problem is.
Michael, how do I get the drop down working in IE6? All other browsers work fine. I see Tony received an answer. The site I’m developing is http://www.7dma.com. I would really appreciate any help you can give here or email identity1040@yahoo.com.
Thank you,
Chris
for those who cannot run this dropdown in ie6&7, the fixing is you should grab the latest the jquery lib. for instance 1.4.2, the 1.3 brunches cannot works in ie 6&7, i met this problem before. Then fixing it after migrating to 1.4.2.
cheers.
Thanks for pointing us to your solution, your JS worked fine for me.
And thanks for this post in general – I hate drop-down stuff, this saved me loads of time!
No offense, that’s a horrible looking menu. I mean, you just changed the CSS a and a:hover but the dropdown is still the same dark grey. Blue, with a dark grey? Time to get a color blindness check maybe? :) Only creative criticism.
Blue and grey go well together. I don’t like the rounded ‘tube’ look of the menu personally but the colors are ok.
I think I love you, your JS works great for the hover! Thank you!
thanks. I’ll use this menu
I was able to get the hove working by adding this as my script
http://codeviewer.org/view/code:bf9
looks nice… i’ll give it a try thanks.
Eka’s code did work if you want it to drop down when just hovering over the text. Make sure you put a span around the link and then put in this code (I have changed out all the quotes in the code and switched them to apostrophes):
$(document).ready(function(){
$(‘ul.subnav’).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
$(‘ul.topnav li span’).hover(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”
});
});
you also forgot the between the quotes in line two.
i meant {span} and {/span} (replace { with greater and less than signs)
PLEASE help me with this. I am trying get this rollover text thing to work. I am NOT an advanced user. I see what you posted, I just don’t know how to add it to what i have. Please help me.
muchas gracias.
It’s a very easy to understand tut.
Thank You so much!!! :)
Great menu script, my only problem is I need it to work with older browser versions, i.e. IE6 & IE7. I can’t get the submenu dropdown to display no matter how high I set the z-index property
Any ideas?
Thanks in advance
Are you using transparent PNGs? If you are, it could be the IE Z-Index bug. Try giving the parent element a higher z-index. ie:
Page
…
can we use this in blogger
Thanks so much for this menu
I have client with a knife on my neck to hurry up and finish it, and I didn’t even start because I don’t have a clue where to begining. he said sliding equivalent jQuery form and I said yes, yes i did it many times – but this block my mind and can’t figure it out – PLEASE HELP!At vps.net/vps-signup as you’ll all see there is power icon as handle to move sliding horizontal bar to get/mange your own price/pacage.How come that noupeis publishing wedding cards – but not something like this…sorry but I’m reading you every single day – probably up-to 300 days a year and u r my favourite and still i can get one – only one thing when I ask. please answer with help or tutorial or please direct/redirect me somewhere and tell me what to look for if you hav legal issues of posting this advanced techniques from jQuery Advocates. But I really desperatelly need this. Please answer
Thanks for this great Tutorial!
Thks for the info. but what about the image you used for the bkg.
Just bookmark the article on Del and copy the useful code. Great helps!
Hi,
Excellent menu, easy to style, I just have one request. Is there a way to have add level 3 menu options as well. I have tried it, but the level 3 menu appears behind the level 2 menu dropdown.
Thanks in advance.
I’m looking for sexy menu that support 3rd level submenu.
Love this. How would one modify this to pop up instead of down. I want to create a footer menu…. something like facebook has for contacts. Thanks! :)
Awesome, Im also curious as to what mods you need to make to get this to run up instead of down?
Hi,Nice tutorial.i have added to my website but i don’t see drop down icon.and regarding java script what should be the file name for it?
Thank you for this, i have tried also but could not do it, this helps alot!
Thnak you
Jon
I LOVE this tutorial and script. Thank you. I have made some mods for it and even made it a dynamic menu for my custom CMS. I’m having one tiny issue though: For some reason, headers in my content appear stacked above the nav, while the content properly is stacked below. I have even carved out all z-index CSS descriptors site-wide, and still have this issue. Any advice? Assigning a high z-index for the menu didn’t help.
This is something what everyone should look into. Improving the appearance of their blogs and websites.
First time attraction can mean a lot in terms of return visitors.
very nice informative post…..loved it
great tutorial thanks..
I was wondering where I can get the required background images for the dropdowns and menus. Thanks!
It looks so sexy.I’ll get to try it~~
the hover works for me too, but i still have a jquery error:
handler is undefined
[Break on this error] if ( !handler.guid )
any ideas?
i got it working, its the second part of the function causing the error so i commented it out and now my hover works fine and NO errors:
$(document).ready(function(){
$(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
$(“ul.topnav li span”).hover(
function() { //When trigger is clicked…
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(“ul.subnav”).slideDown(1200).show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“ul.subnav”).slideUp(500); //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”
},
function () {
//
}
);
});
Where can I download the source files for this nav bar?
really sexy
good job man
Great drop down menu, i like it
hello dear
i am use this menu its works core php but when i used in diem cmf its showing error ” $(“ul.subnav”) is null “. why show this error? plz help me…
thanks.
Hi, I tried the code myself to put it on the forum menu goes up as arrows and a banner appears to them so what now? Please help me, and me trying to make millions and uplodati file on a website please I really need. I do not know HTML and CSS well. I put a code, “notepad” and watched the tutorial and not going to put it. Help me please
You might want to consider adding white-space: pre-line; to your elements to prevent overflowing in some browsers (Firefox 3.6.3 for instance).
… to your elements, that is. You might also want to make a change to the comment filtering system so it replaces with > instead of stripping them completely.
Ye, very good. I like it..
awesome tuts, just looking for this sexy menu solutions for one of my website project.
Some of the author’s other tutorials have been really useful for me, but the result for this one is sub-par. The nav menu isn’t user-friendly because you have to click on the parent links instead of just hovering upon them. People expect the latter and, worse, you have to click on the relatively small triggers and not the actual parent links.
Think about this in terms of the iPad/iPhone, though. You can’t hover on those, but you can use this very nice menu to click-and-expand.
Kudos!!!
Wonderful web coding tutorials, thanks a lot!
My hover menu is a DISASTER in Ie7 with the z-index issues.
Can anyone help me out please? It’s worth a link back to your site or blog if you do :)
http://www.enterf1.com/f1-tickets/bahrain.asp
F1 tickets link at the top of the page is my hover menu.
Please get in touch via the contact us button if you can help us out!
Hi
I am new to this navigation menu. I am finding difficult to get this navigation to work. Any one can help me with step by step clear tutorials
nice , thanks for you great work and help
Thanks for the great tutorial,
However can someone point me in the right direction to have a sub sub menu?
Thanks
hi! i really like this nav menu, and the tutorial was excellent. However, i am having a problem with the menu. It wont display over the rest of my content. I have tried altering the z-index, but to no avail. Can someone please tell me how i do this? i’m sure its something simple, but i cant work it out.
Many thanks
Ryan
What’s your content you’re trying to display over? Flash, text, images? If it’s Flash than play with wmode.
I want to make the drop down menu appears when the cursor is on a menu, not on the side knob
Very attractive menu, thanks for example!
zoormjarf
aded
tets
Thank you much! Very helpful! I did it as an excercise, and learned more about using jquery. Looks sharp :D
Not work,help me plsssss what is a download?
It’s stupid
you are stupid
not a good menu i have better menu
i’msuzon
Multilevel support?
An awesome tutorial! Looking into getting it to work now!
That’s very coool
THanks alot
Very nice tutorial
but it does break down the function if some one has javablocker like me :s
to bad the basic menu function doesn’t work any more, if you have a javablocker:(
sehr toller beitrag. macht weiter so und ich komme immer wieder gerne hier auf eure seite.
lieben gruß, mario
very very nice!!!
script doesn’t work even when i added those cotes @ the end any solution please?
Thank you
Hello,
I used this code and working fine. But there is problem that it does not work with n level menu.
I put this code
Home
Tutorials
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Sub Nav Link
Hey what theme is this? i definitely love it :)
Dont forget to close the tags if you want the effect to work. Its easy to overlook some code, sometimes you just forgets some small characters and the result is not what you were hoping for.
very rare
If you want to trigger the drop down on mouseover for the entire link instead of the span… just target the link:
$(“ul.topnav li a”).mouseover(function() { //When trigger is clicked…
thanks!… this is very simple.. this works for hover..
HI, I had sussed this, however when using this method, for some reason the onmouse out function does not work unless you go onto the drop down itself then mouse out.
Any ideas?
i’ll be try tips above. it is great tips for share
for those wanting hover without extra markup:
$(document).ready(function() {
$(“ul.topnav > li a:first-child”).mouseover(function() {
$(this).parent().find(“ul.subnav”).slideDown(‘fast’).show();
$(this).parent().hover(function() {
}, function() {
$(this).parent().find(“ul.subnav”).slideUp(‘slow’);
});
}).hover(function() {
$(this).addClass(“subhover”);
}, function() {
$(this).removeClass(“subhover”);
});
});
You all must be joking here. All Hover codes that you have pasted doesn’t work properly in FF 3.6.6 . Be sure that you have tested the code before and after posting because it gets me frustrated.
I meant everybody should add:
“When copying sourcecode to editor be sure the double quotes and quotes are properly copied”. Most of the time when I copied the sourcecode from this website (website opened in FF) I had to change single quotes and double quotes from italic version to normal – these look very similar but are not the same. BTW the Beth’s code works, just after copying rewrite these double quotes and singlequotes and it is working properly.
Greaat.!!!
Great script! I’ll be using this in some of my web design work. Thank you! :)
Hi,
First off, what a lovely looking menu!
Secondly, I can’t seem to get it to work, and I’ve no idea why… please see: http://www2.thelearningpath.co.uk/
As you can see, neither the arrow shows, or the drop-down itself. If you view the source, it’s pretty much an exact copy of the tutorial, albeit the images have been uploaded elsewhere. But I still can’t seem to get it to work…
Any ideas where I’m going wrong?
Hi
Is it possible to use the dropdown code for two menus in the same page. That is one with full menu and the other one for just a single link. pls help me out.
Regards
N. Leorajan
I would like to implement it in wordpress, can someone help me to do that? Thanks in advance.
i have tried it and it worked perfectly for me. Now, my problem is how to add the dropdown arrows in front of the top navigation links.
My website is not published yet, but have decided to use this wonderful drop down menu! My issue is with the CSS for the – page properties; “body”. I have a background image. How can I get the body_bg.gif image to work? Is there such a thing as dual body css? This is driving me crazy that I can’t figure out how to not override it, or even change the name which does not work.
Your CSS for body:
body {
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
font-family: normal Arial,Helvetica,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 10px;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
-x-system-font: none;
background-color: #ddd;
background-image: url(images/body_bg.gif);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0% 0%;
}
My CSS for body:
body {
background-image: url(images/background-pagenew.jpg);
background-repeat: repeat-x;
}
Any suggestions of what I might do to fix this major issue?
I’ve changed my approach and just added the bar into my background image! I figured out a different way.
Cheers
Great resource, thanks!
Türkiyenin en kaliteli, çe?idin çok oldu?u erotikshop sitesi, erotik marketin adresi, her türlü zevk ürünleri, aletleri bulunur GSM:0535 429 46 01 GSM:0543 664 70 81
erotikshop, eroticshop, erotik market, oral sex ürünleri, sex ürünleri, sex aletleri, cinsel zevk ürünleri, ?i?me bebek, penis büyütücü, bayan azd?r?c?,
ErotikShop, Geciktirici Sprey, Penis Büyütücü Hap, SexShop,
Can anyone tell me how to create a second level fly-out menu from the main dropdown? The examples I’ve seen, such as uinsureme.com, only use one drop-down list per nav button, not multiple lists.
I really appreciate your patience in helping a newbie.
Thank you,
Chris
working in ASP.net C#. this menu is not working properly when it is included in master page otherwise in all other pages its working (aspx, html). Please help
Its very usefull for me.Thx
study…!
The demo site is no longer available
Can this code be turned into a mega menu? I need to have a drop down with 2 -3 columns. I like this menu but need to tranform it into what I need.
Nice menu. I have it working great in a site I am designing. Is there a way to make the menu “Drop Up” instead of dropping down? I tried reversing the jQuery calls but that just messed it up. I cant seem to find any other examples of drop up menus on the web. Any help is appreciated! Thanks
-Lauren
Nice menu, but not working when before “html” tag is
:/
… DOC TYPE declarations.
does not work with z-index property, The menu never positioned above the other elements in internet explorer 6 and 7.
can you helpme?
Really nice. Thanks a lot
You have a really nice blog, but I can’t find the download link or button to play with these files. Do I have to fish them out manually?
Thanks for ur tutorial can we implement this in our Existing Menu which is TOtally based on CSS and Java Script
thanks
Excellent, thank you,
this is great. I’ve extended it’s usage to Contao CMS navigation module and everything is working right.
Am also looking for a another sexy vertical menu that slides down vertically to view the sub menu.Great moment
Thanks! So much
hi
Im new to js and jQuery. I understand what all the js up there does, expect the following lines
$(this).parent().hover(function() {
},
Hi, it`s a cool menu, but how can I delay the mouseover ?
With $(this).parent().find(“ul.subnav”).delay(1000).hide(50);
I get problems, because after 5 Klicks it hides at once.
Thank you.
Thank you for sharing, really nice design…
It’s really cool. very good. I redesigned my web site. Please let me know your thoughts. Visit riyasonline.info. Thanks
Hi
Good solution thanks for that.
Regards
Thanks! Its good to have people who can share about this.
Sorry I have tried to view your online demo with chrome, ie8 and ff4, none is working!
I have just tested it and it works perfectly. May be something is wrong with your setting.
Nice one. I have tried it and it’s working great for me.
thanks for the tutorial. i am however finding a lot of confusion. i wish there could be more information about parts of the nav such as the images used in the css part
In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.