jQuery Dropdown Menu
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.