Jun 2

Sexy Drop Down Menu w/ jQuery & CSS

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

Image1 in Sexy Drop Down Menu w/ jQuery & CSS

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.

Degrade Gracefully Demo in Sexy Drop Down Menu w/ jQuery & CSS

This is what it looks like when javascript is disabled:

Javascript Disabled in Sexy Drop Down Menu w/ jQuery & CSS

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.

Tags: ,

316 Responses, Add Comment +

  1. Peter Kahuria 27 January 2010

    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!

    • Ralf S. 30 January 2010

      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

      • Shivanand 2 February 2010

        Hover Didn’t work for me too

  2. P-L Gendreau 28 January 2010

    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’);}

    • Stephen 1 February 2010

      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?

      • Matt 2 February 2010

        I too tried this as i would prefer my navigation to not require a click, however, i was unsuccessful in making it work?

        • eka 2 February 2010

          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”
          });

          });

          • Matt 2 February 2010

            Not too sure? The code seemed a little different for me with the ” and my ”
            It didn’t work

          • Shivanand 2 February 2010

            No,the script is not working.

  3. Basti 6 February 2010

    A very nice Tutorial but the script isn’t working ?!
    Please help :)
    tunetek @gmx.de

  4. Aboubaker Nour 8 February 2010

    Thank you for the tutorial,
    Can I make it just when the mouse hover it the drown menu works ?

Trackbacks

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!