08448 262 595

info@webchief.co.uk

Web Chief on Linked In Web Chief on Facebook Follow Web Chief on Twitter

Our Services

We produce ecommerce solutions for businesses on every scale.
Find out more

Contact

+44 (0) 1902 689 275

info@webchiefdesign.co.uk

Simple jQuery Dropdown Menu

In this tutorial we're going to make a simple dropdown menu with jQuery.

JQuery is great for making things like dropdown menus, it's really simple to use and allows us to write lovely, clean html. JQuery is really easy as long as you remember that it's all in the css. If you keep that fact in mind, you'll have no problem using jQuery.

We're going to make a simple dropdown menu using jQuery and its going to look like this:

How will our dropdown menu work?

Dropdown menus work by simply hiding the sub-menu lists by setting the visibility to hidden in our css. Then when the mouse rolls over a first leve menu item we'll use jquery to alter the css and set visibility to visible. Simple. This is essentially how all dropdown menus work. I bet you thought there was more to it right? Of course we can then use jQuery to animate the change, set how long the sub menu stays open for and add other style elements like drop shadows and whatever we need.

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

<ul class="myMenu"> <li><a href="#">menu item 1</a></li> <li><a href="#">menu item 2</a> <ul> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 2</a></li> <li><a href="#">sub menu item 3</a></li> <li><a href="#">sub menu item 4</a></li> </ul> </li> <li><a href="#">menu item 3</a> <ul> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 2</a></li> <li><a href="#">sub menu item 3</a></li> <li><a href="#">sub menu item 4</a></li> </ul> </li> <li><a href="#">menu item 4</a></li> <li><a href="#">menu item 5</a></li> </ul>

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

/*style the main menu*/ .myMenu { margin:0; padding:0; } .myMenu li { list-style:none; float:left; font:12px Arial, Helvetica, sans-serif #111; } .myMenu li a:link, .myMenu li a:visited { display:block; text-decoration:none; background-color:#09F; padding: 0.5em 2em; margin:0; border-right: 1px solid #fff; color:#111; } .myMenu li a:hover { background-color:#0CF; } /*style the sub menu*/ .myMenu li ul { position:absolute; visibility:hidden; border-top:1px solid #fff; margin:0; padding:0; } .myMenu li ul li { display:inline; float:none; } .myMenu li ul li a:link, .myMenu li ul li a:visited { background-color:#09F; width:auto; } .myMenu li ul li a:hover { background-color:#0CF; }

Again, notice that the sub menu unordered lists have their visibility set to hidden. This also means that the list will degrade gracefully, if the user doesn't have javascript available on their browser the sub menus will not display.

Lets start adding the jQuery to make pour dropdown menu work. The first thing we have to do is download jquery if we haven't already got it and include it on our page. Add the following to the head of your document making sure that you get the path top the file correct:

<script type="text/javascript" src="jquery.js"></script>

Now we can start writing the jQuery code that'll make out slides move.

Now lets start adding the jQuery code. Still in the head section, under where you included the jQuery file, add the following:

<script type="text/javascript"> $(document).ready(function() { //our code will go here }); </script>

Now we're setup and ready to start coding. The first thing we have to do is bind event handlers to our first level menu items (our first level li nodes). This is a bit like setting event listeners in actionscript, we're setting it up so that when the mouse rolls over a first level list item, a function is called, in this case the function will set any second level lists to visible. But lets not get ahead of ourselves. Lets bind an event listener for when the mouse rolls over a first level list item:

$('.myMenu > li').bind('mouseover', openSubMenu);

So this line of code sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called. Lets write this function now:

function openSubMenu() { $(this).find('ul').css('visibility', 'visible'); };

This should be easy to understand; when the mouse rolls over the list item, the function looks for an unordered list within it. If one is found, it sets the style property visibility to visible.

If you test your menu now you'll find that the submenus open nicely. But there's a problem, they don't close when we roll out. We need to bind another event listener to detect when the mouse rolls out and call a function that gets rid of the dropdown.

Below the first event listener, add the following:

$('.myMenu > li').bind('mouseout', closeSubMenu);

And then add the new function:

function closeSubMenu() { $(this).find('ul').css('visibility', 'hidden'); };

This closeSubMenu function just does the opposite of the openSubMenu function, it sets the visibility style element of the sub level list items to hidden.

Your jQuery code should now look like this:

<script type="text/javascript"> $(document).ready(function() { $('.myMenu > li').bind('mouseover', openSubMenu); $('.myMenu > li').bind('mouseout', closeSubMenu); function openSubMenu() { $(this).find('ul').css('visibility', 'visible'); }; function closeSubMenu() { $(this).find('ul').css('visibility', 'hidden'); }; }); </script>

Test your menu. You now have a working jquery dropdown menu!

I hope this has shown you how easy it is to create dropdown menus with jquery. Of course there's a lot more you could do with timers and animation and such. I'll put up more dropdown tutorials soon with more complex functionalily, so come back and check.

Get the finished dropdown menu here.

If you have any questions or comments you can reach me at will@webchiefdesign.co.uk. Thanks!

digg delicious technorati facebook

Get in touch

Get in touch with Web Chief and start your online project today!
All of our quotes are totally free and carry no obligation.

Get Quote

Blog

Everyday hundreds of people from around the world visit our blog.

Find out why our clients love what we do!

Our Clients