Sexy Drop Down Menu w/ jQuery & CSS
- By Editorial
- Posted in TUTORIAL
- 671 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.
goodofficer777, 02 January 2012
Just open the demo page and save it with .html type with image
juxtagonale, 05 January 2012
your demo page link doesn’t work.
Anshul, 05 January 2012
Demo page not present…
Lucas, 07 January 2012
where i can get the images ? demo not working
amir, 10 January 2012
how can i make the sub menu horizontal?
Jornes, 11 January 2012
This menu is really nice. Love it very much! =)
Nick, 11 January 2012
Seems like a very nice drop down menu, but…
Your demo page link STILL doesn’t work !
adgfx, 12 January 2012
Demo is not there, i tried the code.. css is rendering but the sub_menu is not active. does it have to do with the image files in the css?? what size r those images.. width & height?
Nick, 12 January 2012
You got it, the submenu is dependant on an image… no image, no dropdown menu :) just use a background: url of an arrow image for ul.topnav li span … i tried it with a width: 15px;height: 10px; one and it does fine for demo purposes
Jonny, 27 January 2012
I had the same issue as adfgx, but when I tried your solution, it didn’t work. Still no dropdowns. I have a GIF, with the correct file name, and correctly sourced. And tips?
Marc, 13 January 2012
Hi guys,
I couldnt find the images here too, but I used google to find them for me.
I found an spanish version of this tutorial which presented the images for us
go here : http://micodigobeta.com.ar/?p=517 let google translate the page for you and at the bottom you will find a link with the download.
if that doesnt work, use this link : http://www.google.nl/search?sourceid=chrome&ie=UTF-8&q=dropdown_linkbg.gif
and go through the results to find them.
Note to the author: Cool post but would be cool to add the images too.
Anita Clark Realtor, 14 January 2012
Excellent…I have just the site to try this menu out on.
monika, 20 January 2012
its not working……
Shawn, 24 January 2012
Soh’s personal website is offline at the moment due to domain problems therefore the demo will not be working. Follow him on Twitter to get updates on when his website will be up again:
asisin, 29 January 2012
The menu works well, but I’m running into some z-index issues. The main content container is obscuring the menu so only the first item in the dropdown shows up. Help!
Wayne, 30 January 2012
@asisin – The menu needs to be within the same DIV as your content. Put a container around both the menu and your content, and things should work nicely.
….
…..
Werner, 30 January 2012
Great work with this plugin!
I have an issue when i have loaded the jquery easing js, the dropdowns does not hide properly, but i guess ill find a fix
chris, 01 February 2012
Links to working demo down :(
Emes, 03 February 2012
No demo, please update
Dat4BIT, 03 February 2012
Thank you for the script!!! I just using for a menu with XSL transform. I have a suggest for this use: change this line of JS
$(“ul.subnav”).parent().append(“”);
with
$(“ul.subnav”).parent().append(document.createElement(“span”));
for permit the XSL Transform without problems!