jQuery Dropdown Menu on Click/Hover with Slide/Fade

Posted on September 8, 2015 by Dan Doicaru in jQuery/JavaScript Category with Medium Difficulty

I saw a lot of people asking on different websites, how to create a jQuery dropdown menu using the animation of the jQuery's slideToggle() function when you click or hover on a parent list item. The process is very simple, as we will need only 3 lines of jQuery to make this animation work.

In my previous tutorial I was explaining how to create a simple drop down menu only with CSS when you hover <li> items. Now, in this tutorial we will use the same technique, but instead of appearing and disappearing of sub menus, we will create some animations with slideToggle() and fadeToggle() functions, when you click or hover on the parent link.

View Video Tutorial

jQuery Dropdown Menu on Hover with slideToggle() Function

This is pretty simple to do. We need to create a hover() event function for each menu item. After that, inside the function, we need to refer to the next inner <ul> which is the children of the upper parent. For this we will use the children() function, followed by slideToggle() animation. Also, to refer to the current hovered item, use $(this) selector.

$('.myMenu ul li').hover(function() {
	$(this).children('ul').stop(true, false, true).slideToggle(300);
});

Notice that I used another function stop(), which has 3 boolean type parameters (queue, clearQueue, jumpToEnd). If you don't include it in your code, the animation will run how many times you hover in and out the element, and we don't need that. We need to stop the animation when the mouse is out of the parent item. You can read more about stop() function here.

View Demo

jQuery Dropdown Menu on Hover with Slidetoggle

jQuery Dropdown Menu on Hover with fadeToggle() Function

This jQuery dropdown menu has basically the same script as above. You only need to change slideToggle with fadeToggle() function. This will only fade in and out the sub menu.

$('.myMenu ul li').hover(function() {
	$(this).children('ul').stop(true, false, true).fadeToggle(300);
});

View Demo

jQuery Dropdown Menu on Click with slideToggle()

Here is a bit complicated as we need to create the click event on the parent anchors that has a sub menu. You will need a helper class to each <li> that has another <ul> inside. In my example I added the class name has-children to each <li>, so we can target only the <a> tags using that class (initial href of the link will be disabled, so you can only open the sub menu).

$('.myMenu ul li.has-children > a').click(function() {
	$(this).parent().siblings().find('ul').slideUp(300);
	$(this).next('ul').stop(true, false, true).slideToggle(300);
	return false;
});

As you can see, I used the click() function exactly on the anchors with parent <li> that has the class added to each item with sub menus. On line number 2, we go up one level to the parent <li> to find the other <li> elements using the siblings() function, and after that we slide up the inner <ul> sub menu.

The rest of the code is similar with the others above. I only added return false just to disable the initial href link of the anchor. That means if you have a link that points to another page, return false will simply disable the link and it will do nothing, just executing the code.

View Demo

jQuery Dropdown Menu on Click with fadeToggle()

This jQuery dropdown menu is similar to the one above, but instead of using the slide function, you will use fadeToggle() and fadeOut() to close the siblings menus.

$('.myMenu ul li.has-children > a').click(function() {
	$(this).parent().siblings().find('ul').fadeOut(300);
	$(this).next('ul').stop(true, false, true).fadeToggle(300);
	return false;
});

View Demo

Conclusion and Source Files

So, you learned how to create a jQuery dropdown menu with 2 animations (fade and slide) when you click or hover on parent <li> to open the inner child <ul>. Also, if something is not working correctly with the jQuery dropdown menu code above, please leave a comment and I will come with a solution right away! You have the source files below.

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.17 out of 5)
Related Articles
No Tags Inserted
Comments
  1. Gravatar Icon Edward:

    How do you change the text color?

  2. Gravatar Icon Umair Hassan:

    Where is the CSS code?

    • Hello Umair,

      The post is actually about how you write the jQuery code. Anyway, you can find a sample CSS in the demo files.

    • Gravatar Icon Yusuf:

      Please help a novice. Great tutorial, but I’m having issues implementing it. Tried redundantly with no success. My nav is still in bootstrap default click mode, works flawlessly, but I don’t want to click on desktop. Auto hover is the better route. What am I doing wrong? I want hover on dropdown. Thanks.

      • Hello Yusuf,

        Not sure what you are trying there, but it seems that you want 2 events for your menu. I guess hover event for desktop and click event for mobile devices, both on the same menu. If you want to do that it’s a little complicated as you need to unbind() the hover event on mobile using an if statement to detect if the window resolution is the same as mobile devices. I can help you if you want, but this feature is totally outside the tutorial and it will cost you.

        • Gravatar Icon Yusuf:

          Thanks for quick response. That is exactly what I want. Could you please email offline to discuss? Greatly Appreciative.

  3. Gravatar Icon Vuong Nguyen:

    Hi! Thank you for sharing this menu!

  4. Gravatar Icon Mustafa Sange:

    Hello Dan,

    Great tutorial, simple and easy to understand and use, I am new to jQuery and I was struggling to get mobile menu with click function. I would just like to know from you that if I use both hover and click options will it affect the system as I have responsive menu? Please email me if possible the reply. I will be using on my website once finalized.

    Thanks in advance.

    • Hello Mustafa,

      I am not sure if you can use both options (click and hover) because an item can have only one active event at a time. You can use a drop down menu with hover on desktop and hide it on mobile… And the other menu container should have styles only for responsive (below 767 pixels) with the jQuery click event applied on its items. So in the end, you should have 2 separate menus.

      • Gravatar Icon Khanal:

        Great tutorial, simple and easy to understand and use. I am new to jQuery and I was struggling to get mobile menu with click function. I would just like to know from you that if I use both hover and click options will it affect the system as I have responsive menu? Please mail me if possible the reply. I will be using on my website once finalized.

        Thanks in advance!

  5. Gravatar Icon Kay:

    Hi, great tutorial. I am doing the tutorial with the click function. I was already working on a project so maybe it is something in my code, but for some reason it shows the sub menus when I hit refresh. Then I select a menu item and they all slide up and continue to work as they should. It’s just that when the screen refreshes the sub-menu’s are showing. How can I solve this?

  6. Gravatar Icon Ricardo:

    Hi, how could I make the class=”selected” work, to show in what page the user is in.

    • Hello Ricardo,

      To do that you need some PHP code or if you use the same menu on every page, just add that selected class on your current page item. This menu comes only with the basic jQuery functions. If you want I can assist you with your project to achieve the problem you described.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


9 + = 14

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.