Create A Simple jQuery Drop Down Menu in 3 Simple Steps

This week’s Tutorial of the Week teaches you how to create a simple drop down menu which appears when you click on it, and disappears a second after your mouse pointer leaves it.

1) The elements you will need

To create a drop down menu, you will need two items:

  1. A Button
  2. A Drop Down Menu

To start off, we will be creating these two elements:

<a id="link">About</a>

<div id="submenu">
     <a href="#">About the company</a><br />
     <a href="#">Careers</a>
</div>

I put in 2 random links in the sub menu just as a sample. The button is the “About” link which should load up the sub menu when clicked on. Here’s what it will look like:

2) The CSS you will need

Since the sub menu needs to be positioned directly under the link, we will need some CSS to create the desired layout.

We will need to set the position attribute to absolute to ensure that the sub menu will go over the rest of the content. We will also apply a small border so you can see the menu. Additionally, we will give the link a background color to make it easy to see.

<style>

a#link {
	background:#CCC;
	padding:10px;
        cursor:pointer;
}

div#submenu {
	position:absolute;
	border:1px solid #CCC;
	background:#FFF;
	padding:10px;
}

</style>

With the CSS in place, it should now look like:

Next, we need to set the CSS display property to none for the sub menu. We do not want the sub menu to appear when you load the page the first time.

3) The jQuery you will need

First and foremost, you will need to include the jQuery library:

<script type="text/javascript" language="javascript" src="/PATH/TO/jquery.min.js"></script>

With the library included, we are going to need three event handlers:

  1. The first will get triggered when you click the link
  2. The second will trigger when your mouse enters the submenu
  3. The third will trigger when your mouse leaves the submenu

Here’s the first event handler:

$('a#link').click(function() {
	// Trigger event on click

	var submenu = $('div#submenu');
	// Store the sub menu element in the 'submenu' var

	if (submenu.is(":visible")) {
		// Is the submenu visible?

		submenu.fadeOut();
		// If so, fade it out.

	} else {

		submenu.fadeIn();
		// If not visible, fade it in.

	}
});

I’ve included a number of comments to explain what is happening. When the button is clicked, jQuery checks to see whether the submenu is already visible and hides it or shows it accordingly. Simple enough so far, right?

The new two event handlers will make the sub menu disappear once the mouse has left it and some time has passed. In order to do this successfully, we need to create a JS variable which lets us know whether the pointer is currently inside the submenu or outside of it. Why? If we take our cursor out and place it immediately back in, we do not want the fadeOut function to get triggered.

Here are the two event handlers and the variable:

var submenu_active = false;
// Is the cursor inside the sub menu?

$('div#submenu').mouseenter(function() {
	// On mouse enter, set the var to true

	submenu_active = true;		

});

$('div#submenu').mouseleave(function() {
	// On mouse leave, set it to false
	submenu_active = false;

	// Use the setTimeout function to run
	// a command after a short delay.

	// The code above will pause the code for
	// 400 milliseconds and then checked
	// whether the submenu is active or not
	// If not, it will fade it out

	setTimeout(function() { if (submenu_active === false) $('div#submenu').fadeOut(); }, 400);
});

And here’s all the code again, this time without any comments:

$('a#link').click(function() {
	var submenu = $('div#submenu');
	if (submenu.is(":visible")) {
		submenu.fadeOut();
	} else {
		submenu.fadeIn();
	}
});
var submenu_active = false;

$('div#submenu').mouseenter(function() {
	submenu_active = true;
});

$('div#submenu').mouseleave(function() {
	submenu_active = false;
	setTimeout(function() { if (submenu_active === false) $('div#submenu').fadeOut(); }, 400);
});

What the code above does is wait a short while when your mouse leaves the submenu. If, after this short while, your mouse hasn’t entered again and set submenu_active to true, it will fade out the submenu.

And here’s what the final menu should look like (you can click it!):

About

Taking it to the next level

The above has been a simple example which should help you get started and design your own jQuery drop down menu.

As I always suggest, it would be best to take the code above and start playing around with new layouts and menus. Try different approaches and see what works best. As you can see, creating a simple, but effective menu in jQuery is extremely simple.

Any questions? Comment below!

Don't forget to check out more posts from the Tutorial of the Week section.

blog comments powered by Disqus
.