Dropdown navigation with jQuery

There is a lot of different ways to create dropdown navigation with jQuery. In this tutorial I’m going to show you how to create very simple jQuery dropdown menu. With no advanced CSS, simple HTML and jQuery.

JQuery is very powerful tool these days, loads of web designers and developers are using jQuery in their projects. Code is very simple and clean, just one thing you need to remember to fallow few simple rules.

View Dropdown Navigation Demo

The first thing we have to do is write HTML. Like most menus this one is done with an unordered list:

<div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
      <ul class="subNavigation">
        <li><a href="#">Branding</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Web</a></li>
        <li><a href="#">Marketing</a></li>
      </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
  </ul>
</div>

Now we’re going to style the list with css:

CSS is very simple, so you can copy this one or create your own.
It’s important to set our submenu class to display:none;

body{ font-family: Helvetica, Arial, sans-serif; font-weight: bold;}

.subNavigation {
    display: none;
}

ul {
    list-style: none; margin:0px; padding: 0px;
}

.navigation li {
    float: left; 
    width: 120px;
    background: #555555;
    background: -moz-linear-gradient(#555555 0%, #31322d 100%);
    background: -webkit-linear-gradient(#555555 0%, #31322d 100%);
    background: linear-gradient(#555555 0%, #31322d 100%);
}

.navigation li a {
    text-decoration: none; 
    color: #fff; 
    display: block; 
    padding: 20px;
}

.subNavigation li {
    color: #fff; 
    text-align: left; 
    list-style: none;
}

.subNavigation li:hover {
    background: #454444;
}

.subNavigation li a {
    display: block; 
    text-decoration: none; 
    color: #fff;
}

Let start adding the jQuery to make our dropdown menu work.

The first thing we have to do is to download jQuery and include it on our page. The other option is to use quick link from jQuery site. Add the following to the head of your document making sure that you get the path correct:
Remember to choose only one option, as you might have a conflict between two different jQuery libraries.

<script src="jquery.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>

Now we can start writing the jQuery.

First thing we have to do is to ad class “naviClick” to our “subNavigation” parent.
You can do it through jQuery or you can add class yourself to HTML Dom.

<li class="naviClick"><a href="#">Home</a></li>
$('.subNavigation').parent().addClass('naviClick');

We have to bind event handlers to our first level menu items li, so when the mouse hover over a first level list item, a function is called.

$('.naviClick').hover(function()

This should be easy to understand; when the mouse hover over the list item with class “naviClick”, the function looks for an unordered list inside. If one is found, We can create a nice fade effect slideDown()/ slideUp() .
To get rid the common problem of multiple queued animation we have to add stop() method.

$(this).find('ul:first').stop().slideDown(200);

For your own curiosity you can delete our stop() method and test it in the browser. Hover over few times list item with subnavigation.

Below you have ready jQuery code for dropdown navigation.

$(document).ready(function(){
   
   // Add class by jQuery, 
   // you can skip this line by adding the class 'naviClick' to HTMl Dom.
   $('.subNavigation').parent().addClass('naviClick');

   $('.naviClick').hover(function(){
      // When the event is triggered, grab the current element 'this' and
      // find it's children 'ul:first' and display/hide them by
      // slideDowm/ slideUp method.

      //Instead of ul:first, you can use class .subNavigation

      $(this).find('ul:first').stop().slideDown(200);

   }, function(){

      $(this).find('ul:first').stop().slideUp(200);

   });

)};

Download demo files

Dropdown navigation with jQuery

Comments are closed.