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:
- $(document).ready(function(){
- $('.down-list').width($('.dropdown-menu').width()-2);
- $('.dropdown-menu').hover(
- function () {
- $('.menu-first', this).addClass('slide-down');
- $('.down-list', this).slideDown(100);
- },
- function () {
- obj = this;
- $('.down-list', this).slideUp(100, function(){ $('.menu-first', obj).removeClass('slide-down'); });
- }
- );
- });
Code Breakdown
- $('.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.
- $('.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.
- function () {
- $('.menu-first', this).addClass('slide-down');
- $('.down-list', this).slideDown(100);
- },
- function () {
- obj = this;
- $('.down-list', this).slideUp(100, function(){ $('.menu-first', obj).removeClass('slide-down'); });
- }
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.
March 18th, 2009 at 9:27 am
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
March 23rd, 2009 at 4:28 am
Thank you it’s work perfect!
April 7th, 2009 at 4:44 pm
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.
April 8th, 2009 at 12:38 pm
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?
April 11th, 2009 at 9:47 pm
@kzediker – not sure why, it shouldn’t
April 12th, 2009 at 4:33 am
Very nice, lightweight too! I’ve used a jQuery plugin called “Droppy” before for dropdown menus, which is quite nice also.
April 17th, 2009 at 8:35 am
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.
July 31st, 2009 at 3:50 pm
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.
November 3rd, 2009 at 9:55 am
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.
November 3rd, 2009 at 10:03 am
Ah just fixed it. Forgot to add a z-index:1; to the relavtive parent container.
January 30th, 2010 at 1:00 pm
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…
February 15th, 2010 at 11:18 am
That is verry nice script thanks for tip with that z-index.
February 19th, 2010 at 1:07 am
Fantastic! Can it be used in commercial projects?
March 17th, 2010 at 12:00 am
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.
March 22nd, 2010 at 9:02 pm
thanks, can i use this dropmenu dedign in my own webisite
August 12th, 2010 at 7:22 am
Nice,JQuery is very good…
i always use it
August 18th, 2010 at 12:50 am
Thank you!!! I am using jquery in my project…