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:
- menu item 1
- menu item 2
- menu item 3
- menu item 4
- menu item 5
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:
Now we're going to style the list with css:
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:
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:
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:
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:
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:
And then add the new function:
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:
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.
If you have any questions or comments you can reach me at firstname.lastname@example.org. Thanks!