Javascript must be enabled for the correct page display

Noupe

search form
          Jun 02 2009

Sexy Drop Down Menu w/ jQuery & CSS

Advertisment

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.

border:1px solid #E7E5DD; padding:20px" class="img">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=index.php?i=1&m=1&u=http%3A%2F%2Fwww.noupe.com%2Ftutorial%2F%22%23%22%3ESub Nav Link</a></li> <li><a href=index.php?i=1&m=1&u=http%3A%2F%2Fwww.noupe.com%2Ftutorial%2F%22%23%22%3ESub Nav Link</a></li> </ul> </li> <li> <a href="#">Resources</a> <ul class="subnav"> <li><a href=index.php?i=1&m=1&u=http%3A%2F%2Fwww.noupe.com%2Ftutorial%2F%22%23%22%3ESub Nav Link</a></li> <li><a href=index.php?i=1&m=1&u=http%3A%2F%2Fwww.noupe.com%2Ftutorial%2F%22%23%22%3ESub Nav Link</a></li> </ul> </li> <li><a href=index.php?i=1&m=1&u=http%3A%2F%2Fwww.noupe.com%2Ftutorial%2F%22%23%22%3EAbout Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Submit</a></li> <li><a href=index.php?i=1&m=1&u=http%3A%2F%2Fwww.noupe.com%2Ftutorial%2F%22%23%22%3EContact 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

border:1px solid #E7E5DD; padding:20px" class="img">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.

Pin It

About the Author

Homepage

Comments and Discussions

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

Click here to cancel reply. comments form

   

categories

 

Advertisment

Advertise with us!

Popular Articles

Smashing Magazine

Fleaty is back

Fleaty Is Back!
After months of silence, our comic strip on Web design is now back. Illustrated by Ricardo Gimenes, we'll be publishing a new cartoon every Friday. Check out the new cartoon.

Smashing Job Board

Smashing Directory

search form
    top

Noupe Links

The Smashing Family

image description image description
Mobilize:
images: on /off
Save this page at PhoneFavs.

Original version.
Mobilized by PhoneFavs