March 17th, 2009 - by Golgotha

In this short article we will use jQuery to produce this dropdown menu. Over the past six months I have been using a lot of jQuery and have fallen in love with it. For those not familiar with jQuery it is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. All this and for only 19KB! How nice is that? They claim that, “jQuery will change the way that you write JavaScript.” And they are right. Companies such as Google, Dell, Bank of America, Major League Baseball, Digg, NBC, CBS, Netflix, Technorati, WordPress, Drupal, Mozilla and many others use jQuery too. Ok, that’s enough of a plug, let’s look at the code:

javascript
< view plain text >
  1. $(document).ready(function(){
  2.  
  3.     $('.down-list').width($('.dropdown-menu').width()-2);
  4.  
  5.     $('.dropdown-menu').hover(
  6.       function () {
  7.         $('.menu-first', this).addClass('slide-down');
  8.         $('.down-list', this).slideDown(100);
  9.       },
  10.       function () {
  11.         obj = this;
  12.         $('.down-list', this).slideUp(100, function(){ $('.menu-first', obj).removeClass('slide-down'); });
  13.       }
  14.     );
  15.  
  16. });

Code Breakdown

javascript
< view plain text >
  1. $('.down-list').width($('.dropdown-menu').width()-2);

This gets the class .down-list and sets its width equal to the width of the .dropdown-menu’s width minus two. As you may already know or were able to deduce the dollar sign ($) is used to select HTML elements in the page. The $ method accepts a CSS selector(s) as argument(s), so if you want to select a specific element by it’s id or it’s class as in the case here you can use the $(“#myElementId”) code which returns a reference to the DOM element. Learning all the jQuery selectors is very important in mastering jQuery, but is not the scope of this article.

javascript
< view plain text >
  1. $('.dropdown-menu').hover(

This code attaches the hover event to all .dropdown-menu classes. Short and sweet. The hover event uses two functions: over and out. Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires.

javascript
< view plain text >
  1. function () {
  2.  $('.menu-first', this).addClass('slide-down');
  3.  $('.down-list', this).slideDown(100);
  4. },
  5. function () {
  6.  obj = this;
  7.  $('.down-list', this).slideUp(100, function(){ $('.menu-first', obj).removeClass('slide-down'); });
  8. }

The first function is called when someone mouses over a dropdown menu. It adds the class slide-down to the menu and then animates it by sliding down. The 100 in the slideDown method is the speed of the animation measured in milliseconds.

The second function is called when they mouse out. The part to notice here is the additional function in the slideUp method. This is a callback function; it fires when the animation is complete. So in this case when the user mouses off our dropdown menu it will animate up and then remove the class slide-down. And that will wrap up our dropdown menu.

As you can see, very little code to achieve this common web effect thanks to jQuery.

17 Responses to “jQuery Dropdown Menu”

1 Andy Wheeler

Nice article on the drop down list with jQuery.

I’m trying to fashion a cascading drop down using jQuery with a non-javascript alternative.

The only thing I come up with is two completely separate files; ie duplicate everything. That’s a lot of work and cost.

Can you guide me to a dependent drop down or a cascading select that degrades nicely?

Andy

2 San Nayak

Thank you it’s work perfect!

3 jacky

Nice post… I also working a lot with jquery and it seems it’s one of the best js library you can find these days.

4 kzediker

It works fine when on it’s own, but in the page, as a server side include, it fails. What can I do to make the drop downs show?

5 Golgotha

@kzediker – not sure why, it shouldn’t

6 BenSky

Very nice, lightweight too! I’ve used a jQuery plugin called “Droppy” before for dropdown menus, which is quite nice also.

7 ARTI

It works fine on my version of Firefox 1.5.0.1 Perhaps you don’t have the latest version. I run an image gallery myself, but I don’t think type of layout would artı work very well for me as I have descriptions for my images and some of the images are quite large. I don’t know, it might be worth experimenting with.

8 Mylo

Cool, you should also discuss the CSS involved, by the way!

I noticed an error in the CSS in your demo page: you have listed

z-index:1000px;

it should just be ‘1000’, of course.

Thanks for saving me some time, I’ll def. be adapting this to my site.

9 Brett

I also noticed the z-index with the px at the end. Even when I removed them I am still having z-index issues. Working in IE6 though.

10 Brett

Ah just fixed it. Forgot to add a z-index:1; to the relavtive parent container.

11 Mauricio Wolff

I solved the z-index issue by conditional commenting css, turning all position:relative elements into position:static (for ie).

Some minor losses, but at least it works…

12 Sylwester w Górach

That is verry nice script thanks for tip with that z-index.

13 Tim Bennett

Fantastic! Can it be used in commercial projects?

14 Sylwester w Górach

Tim,
I think that authors odf this page make clear in privacy politycy (down of the page) all you have to do is read this and understand it.

15 mack

thanks, can i use this dropmenu dedign in my own webisite

16 mobile crusher

Nice,JQuery is very good…
i always use it

17 ball mill

Thank you!!! I am using jquery in my project…

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading