Refine Post By:

So you want to learn how to create an animated drop down menu with jQuery? Look no further. This jQuery drop down menu tutorial will teach you how to leverage HTML, CSS and jQuery to create a fancy drop down menu, with a slick sliding animation for your website!

If you want to see a basic example of what we’re going to create, take a look at the demo. You can style it however you’d like with CSS.

Let’s get started.

The HTML Markup

When you’re creating a navigation in HTML, it’s highly recommend to use some sort of list and then style it accordingly with CSS. Here’s some sample markup that will have two parent navigational links, with three child sub-navigational links. If you want understand what I’m doing below and why, I highly suggest you look at my tutorial on CSS Drop Down Menus.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul id="navigation">
	<li class="dropdown"><a href="#">Dropdown</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
	<li class="dropdown"><a href="#">Dropdown 2</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
</ul>

Voila! Now you got your HTML skeleton and you’re ready to style it to make it look more like a horizontal navigation.

The Simple CSS

Again, if you want to understand what’s going on in the CSS below, take a look at my other post on CSS Drop Down Menus. All i’m doing is basically telling the HTML markup to be displayed as a horizontal navigation and to not show the sub-navigation by default. This is where you would style the mark-up to make it as pretty as you’d like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css">
	ul {
		margin:0;
		padding:0;
		list-style-type:none;
		min-width:200px;
	}
 
	ul#navigation {
		float:left;
	}
 
	ul#navigation li {
		float:left;
		border:1px black solid;
		min-width:200px;
	}
 
	ul.sub_navigation {
		position:absolute;
		display:none;
	}
 
	ul.sub_navigation li {
		clear:both;
	}
 
	a,
	a:active,
	a:visited {
		display:block;
		padding:10px;
	}
</style>

Boom! Now onto the the fun stuff…Let’s program the jQuery to create the fancy drop down animation effect to display our sub-navigation!

The jQuery Animation

So we got the markup, we styled it, and now we get to add the cool drop down effect that you’ve been waiting for!

We are going to add an event listener to our parent element (the first level of the navigation) that listens for both the mouse over and mouse out state. This event is called ‘hover‘. We will assign this event listener to the ‘dropdown‘ class so that any time the users mouse goes over any of these class selectors, the event gets triggered and the function within the event listener gets invoked.

Here’s a look at how we do this:

1
2
// When '.dropdown' gets triggered by hover, execute the function
$('.dropdown').hover(function() {});

Once the event listener gets triggered, we’re going to return the current DOM object that triggered the event (the element that the mouse was over), and find the local-child sub-navigational elements and display them with the animated effect.

So within the function above, you’ll have something like this:

1
$(this).find('.sub_navigation').slideToggle();

Since the hover event listener gets triggered on both the ‘onmouseover‘ and ‘onmouseout‘ events, we used the jQuery slideToggle() method to create the animation for our sub-navigation. The slideToggle() method basically does the opposite of what the current display state of the element is. So if the element is currently displayed and you execute slideToggle() on it, it will slideUp() to hide it. If the element is not visible and you execute the slideToggle() method on it, it will slideDown() to show it.

In our case, since the sub-navigational elements are not displayed by default, the ‘onmouseover‘ event will trigger the slideDown() method to show the sub-navigation, and the ‘onmouseout‘ event will trigger the slideUp() method to hide the sub-navigation!

Putting all the jQuery together looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
        // Wait for the page and all the DOM to be fully loaded
	$('body').ready(function() {
 
                // Add the 'hover' event listener to our drop down class
		$('.dropdown').hover(function() {
                        // When the event is triggered, grab the current element 'this' and
                        // find it's children '.sub_navigation' and display/hide them
			$(this).find('.sub_navigation').slideToggle(); 
		});
	});
</script>

By surrounding the event listener with the ready() function, it allows us to place the snippet of code anywhere we want. If you decide not to use the ready() method, than you’re going to have to place the javascript event listener AFTER the HTML element gets rendered. In other words, place it after the markup.

The Final Product

One last look at everything together:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE HTML>
<html>
<head>
	<style type="text/css">
		ul {
			margin:0;
			padding:0;
			list-style-type:none;
			min-width:200px;
		}
 
		ul#navigation {
			float:left;
		}
 
		ul#navigation li {
			float:left;
			border:1px black solid;
			min-width:200px;
		}
 
		ul.sub_navigation {
			position:absolute;
			display:none;
		}
 
		ul.sub_navigation li {
			clear:both;
		}
 
		a,
		a:active,
		a:visited {
			display:block;
			padding:10px;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
	        // Wait for the page and all the DOM to be fully loaded
		$('body').ready(function() {
 
	                // Add the 'hover' event listener to our drop down class
			$('.dropdown').hover(function() {
	                        // When the event is triggered, grab the current element 'this' and
	                        // find it's children '.sub_navigation' and display/hide them
				$(this).find('.sub_navigation').slideToggle(); 
			});
		});
	</script>
	<title>jQuery Drop Down Menu Tutorial - Demo</title>
</head>
<body>
<ul id="navigation">
	<li class="dropdown"><a href="#">Dropdown</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
	<li class="dropdown"><a href="#">Dropdown 2</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Congratulations! Hope this wasn’t too tricky

27 Comments

  1. Thanks for the great tutorial, it was extremely helpful!

  2. Hey Billy,

    Congrats for the tutorial!

    I was able to adapt it so that my menu and sub-menus created with the help of http://mvcsitemap.codeplex.com/ are styled in a nice dropdown.

    All the best,

    Leniel

  3. Superb tutorial! Thanks!

  4. Perfect!! Thanks for this tuto !!

  5. Hi there, this is really good tutorial for drop down. thanks for sharing it.

  6. Excellent tutorial. How do I make a 2nd level menu to pop out from either left of right side of the first level menu? Thanks.

  7. nice ! but..
    this navigation does not work properly with ipad.
    any work around ?
    cheers

  8. Great tutorial but there is a problem,
    when u hover over it more than 1 time, it will execute as many as u hovered…

    for example i hover over it starts dropping down and it was not fully executed when i moved pointer again over it, it did not stop.
    it slide up and then slide down again.

    can u fix it???

  9. Having an issue with the animation! Sometimes when I hover over and mouse out the animation still goes on…
    how can I stop this?

  10. I posted a couple days ago about the animation repeating if hovered over multiple times. Is there any way to stop that?

  11. hi, thanks for this tutorial sharing.

  12. Thanks for the Tutorial Very Detailed and Simple.

  13. Looking forward to incorporating this. A great tutorial. Thanks.

  14. Awesome tutorial. I’m trying to implement an onclick handler for touch devices without much success. Any thoughts on how to support .click? I can get it to “pop” half way up or down here
    http://hcca.org/calendar0.php

  15. Hi, thanks for the sharing. Btw, i still find problem with the animation though i have added this :
    $(this).find(‘.sub_navigation’).stop(true,true).slideToggle();

    However, when i try to hover the sub menu from side when it’s going to slide up, the sub menu keeps blink.
    Please help me to fix it.

  16. I tried it and find there is a flicker when mouseout on IE8. would give a help to resolute it?

  17. Very useful. Thanks for tutorial.

  18. thank you very much for this tutorial.
    was very helpful.

    one problem:
    my dropdown menu slides down a map, which is a bit big. and while my mouse is on the map, sometimes it stays open, sometimes it’s closing, and sometimes it just closes and opens a few times.

    (if you don’t understand, check this out:
    https://googledrive.com/host/0B0IFv_dLiNaTRG5DTE9YU0dDNVU/test/index.html

    any advice?

    thank in advance
    Chaim

  19. It is not a perfect dd. it has a problem when u hover ur link multiple times quickly. U should use stop() before the animation function.
    thanks
    ravi bhadauria
    admec multimedia institute

  20. hi sir really nice tutorial ca you explain me how to add fadeIn and fadeOut effect in the dropdown menu. Thanks

  21. howdy! , I enjoy your current publishing pretty a good deal! promote all of us speak additional regarding article for Yahoo? My partner and i have to have a specialized on this residence to unravel our challenge. Maybe that is anyone! Taking a look in front to see a person.

Leave a comment