Sexy Drop Down Menu w/ jQuery & CSS
- Posted in TUTORIAL
- 359 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.
Thank you very much for this tutorial. I tried creating a drop down menu myself and I got stuck using the mouseover/mouse out event. You have used a great trick!
Hi, Thank for the great menu. Just one question. Is it possible to drop down menu only by mouse over the main nav with out click on the arrow?
Ralf
Hover Didn’t work for me too
Very sleek menu, nice work! I didn’t really like the clicking part so I slightly modified your code to work with .hoverIntent (which bypasses most of the issues associated with .hover)
$(document).ready(function(){
var config = {
sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: makeTall, // function = onMouseOver callback (REQUIRED)
timeout: 400, // number = milliseconds delay before onMouseOut
out: makeShort // function = onMouseOut callback (REQUIRED)
};
$(”ul.topnav li”).hoverIntent(config).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 makeTall() { $(this).find(”ul.subnav”).slideDown(’normal’).show();}
function makeShort(){ $(this).find(”ul.subnav”).slideUp(’normal’);}
P-L Gendreau,
I tried making your changes to the dropdown.js and it seems to have broken the functionality. Am I supposed to add your code into a new (seperate) JS file? Is there a way that you can include your JS file for us to see in it’s entirety?
I too tried this as i would prefer my navigation to not require a click, however, i was unsuccessful in making it work?
TRY THIS IT worked for me
$(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”
});
});
Not too sure? The code seemed a little different for me with the ” and my ”
It didn’t work
No,the script is not working.
This script doesn’t work because of the wrong quotes at the end of line 2. Switch the empty pair of “” and you’re set.
As I said, “I slightly modified your code to work with .hoverIntent”, the keyword being hoverIntent. Google is your friend ;)
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.
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!
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)
muchas gracias.
Thanks for the tutorial – I will give this a bash and see how it looks.
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
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.
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
Thanks so much for this tutorial.