Create a white Dropdown Menu with CSS and JQuery

DOWNLOAD DEMO

This tutorial shows you how to create a white drop-down menu with HTML, CSS and JQuery.

We start with the HTML file.

You can ignore or leave out the #page-content and footer divs. We've added them to make the example a little bit more complete. In the head tag we include the JQuery library, our CSS file and our JS file. We also specified some meta tags, which you can also leave out if you want. Our example will create a menu with 1 normal link and 2 links with drop-downs. Note that the first main <li> has the class first-li. We need this class for CSS styling. Also, the body tag has the class no-js. This class is needed for the JQuery animations.

Now that we finished the HTML file, let's continue with the CSS code. We begin with the main parts of the page:

Yes, you can leave out footer, div#page-content and div#page-content a.

Now, we'll style the main links.

-webkit-font-smoothing: antialiased; is a CSS property that only works in Webkit-browsers like Safari or Chrome. Learn more about -webkit-font-smooting. Note that we use the .first-li class to add an extra border to the first link. Of course, you could also add this class to the first link instead of adding it to the first list item (then the CSS selection could look like this: ul.white-drop a.first-link).

And now we style the drop-downs.

Now we'll tell you why we use the no-js class. If JavaScript is activated in a browser, we can hide and view the drop-downs with JQuery. If it's turned off, then we need an alternative: CSS. If the browser has JavaScript activated our JQuery code removes the no-js and animates the drop-downs. If JavaScript is deactivated, then the no-js class is not removed, and our CSS solution is used.

Here is the JQuery code:

$(document).ready(function(){
	
  $("body").removeClass("no-js");	
  $("ul.white-drop li ul").hide();

  $("ul.white-drop li").hover(function(){
	  $("ul", this).first().stop(true, true).slideDown("fast");
  }, 
    function(){
	  $("ul", this).first().stop(true, true).slideUp("fast");	
  });	

});

Our code removes the no-js class and hides all drop-downs. When you move the cursor over a main list item, it selects the first ul in the list-item and slides it down. When you remove your cursor from the list-item, the JQuery function slides the drop-down up. The .stop(true, true) function prevents our drop-downs from sliding up and down too often. Visit this link to learn more about .stop()