Hiren Sharma

jQuery Fever: Custom Dropdown

jQuery is definitely a very addictive library, one can never get enough of it. At least it worked this way in my case. After learning selectors, event binding, and animations, I started reading about the plug-ins which I was using in my project, to see how they work.

My motivation behind writing my own custom code was to learn authoring jQuery plugins and to replace 1000 lines of the plugin with few lines of the custom required code. Before we start writing our own plug-ins, it’s important that we strengthen our jQuery skills by writing code for our day to day needs, for which we usually refers to plugins. I am not against using jQuery plugins, unless we are short of time or we need something that’s really complex. Infact I’ll be covering the jQuery plugins in my posts to come but for now lets focus on this particular issue.

So today, let’s see how we can create a basic dropdown, using some basic css and few lines of jQuery code.

Basic Concept

For handling the dropdown animation we are going to use animation queue. It’s a queue, which is provided by jQuery, for storing consecutive animations which you can arrange in a flow and execute. Here’s a link regarding this concept.

jQuery implicitly attaches a default queue with the name “fx” with every animating element. Of course, you can attach your own custom queue as well and use it for animation, depending on requirements.

Let’s get to the code straightaway and see how it works

The Problem

In this Sample, we will have a

  • Dropdown Button that will open/close the dropdown
  • Dropdown Menu which will represent the options

Basic Use Case

The dropdown menu should toggle when User clicks on the dropdown button. If the dropdown menu is open and User clicks on any other element present on the page (including the dropdown button), the dropdown should close.

The Code

We’ll use jQuery’s slideUp/slideDown for animating the dropdown menu. We start by adding two items in our animation queue, one to open the dropdown (slideDown) and another to close (slideUp). We’ll execute the two animations one after another and once the queue gets empty, we’ll reload it again with the same options.

function FillQueue() {
$(“.dropdown-menu”).queue(OpenDropdown);
$(“.dropdown-menu”).queue(CloseDropdown);
}

function OpenDropdown() {
$(“.dropdown-menu”).slideDown();
}

function CloseDropdown() {
$(“.dropdown-menu”).slideUp();
}

The above code sample clearly defines the usage of queue and animation together as a unit. Now lets try to integrate the above functions with our custom dropdown program.

Let’s now define a function that will be executed everytime the dropdown button is clicked. The function will check if the animation queue is empty or not, if it is then we’ll add the two animation to the queue using the FillQueue function.

function ToggleDropdown() {
if ($(“.dropdown-menu”).queue(“fx”).length == 0) {
FillQueue();
}
}

So now we have our animation queue along with the animations ready, we have a function in place which reloads the queue when it’s empty. What’s left is the logic to actually dequeue or a trigger to initiate these animations.

$(document).click(function () {
if ($(“.dropdown-menu”).queue(“fx”).length > 0) {
$(“.dropdown-menu”).dequeue();
}
});

Yes we will initiate our animation on document click. Don’t get confused, let me explain how the concept of ‘event bubbling’ helps us achieve the required functionality. Let’s go through the use case again and see how this piece of code serves the required purpose.

When user clicks on the dropdown the first time, ToggleDropdown function will be executed and our queue will be loaded with two animations and at the same time, since the dropdown is present on the document itself, the document click event will also be triggered. At this point, the first item from the queue (slideDown) is dequeued and executed, which opens our dropdown.

So now we have only one item left in our animation queue. At this point, either the User will click on the Dropdown again to close it or will click somewhere else on the page and our dropdown should close at this event as well.

In both the above cases, the document click event will be fired and the next animation (slideUp) will be dequeued and executed, which actually closes our dropdown. You must be thinking, what will happen if User clicks on the dropdown, won’t the ToggleDropdown event get executed ? Yes it will, but since it has one item left in the queue, so this function will not do anything. At the very next moment, the event will be bubbled up to the document and it’s click event will get executed, resulting in dropdown to close.

You can check the working sample here. Simple n Easy

Hope it Helps !!!

-To Your Coding Success