How to make a Dropdown Menu with jQuery

jQuery is a fantastic and essential tool for any web designer, and using its features for creating a drop-down menu prove to be quite effective.

By the end of this page you should be able to produce something like this:


Click Me!

  • One
  • Two
  • Three
  • Four
  • Five
  • Six

and here's the jQuery coding:

$(document).ready(function() {
$('a.oompa').click(function() {
$('ul.loompa').not('a.oompa').slideToggle();
});
});

Of course, before you begin coding this, you have to link to jQuery, whether it's the online jQuery Here or a jQuery on your local drive/ on your server.

the 'a.oompa' refers to the 'Click Me' Button. Yes, I put that button within an 'a' tag and gave it the class of 'oompa'.
The 'ul.loompa' refers to the list 'One, Two, Three, etc' which are within an unordered list tag and have the class of 'loompa'.

Basically what the script is doing is
1) when it's ready '$(document).ready',
2) IF I click the anchor tag of class oompa '$('a.oompa').click'
3)run the following function '(function(){ '
4) that the unordered list of class loompa '$('ul.loompa')
5) NOT the anchor tag of class oompa '.not('a.oompa')'
6) performs a predefined action slideToggle '.slideToggle()'

and thats exactly the inner workings of how that works. The rest is just CSS. Of course, you can change the effect from slide to something else, and you can change when the function runs from a click to something such as a mouse enter (hover) or anything else. You can also make this effect much fancier by applying your knowledge of jQuery appropriately.

I hope that was clear enough.
Enjoy!