jQuery menu on hover open submenu

Question

I am trying to design something like the followingL

<ul class="top">
  <li><a href="#">Menu1</a></li>
  <li>
    <a href="#">Menu2</a>
    <ul class="sub">
      <li><a href="#">SubMenu1</a></li>
      <li>
        <a href="#">SubMenu2</a>
        <ul class="subsub">
          <li><a href="#">SubSubMenu1</a></li>
          <li><a href="#">SubSubMenu2</a></li>
        </ul>
      </li>
      <li><a href="#">SubMenu3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu3</a></li>
</ul>

And my idea is that if the Node has subNodes, then the submenu will open. So in this instance, if the user hovers on Menu2, the SubMenu1, SubMenu2, and SubMenu3 will appear, and if the user hovers on SubMenu2, SubSubMenu1, SubSubMenu2 will appear.

I have the following jQuery at the moment:

$(document).ready(function () {
  $("ul.top li").hover(function () { //When trigger is hovered...
    if ($("ul.top li").hasClass("sub")) {
      $(this).parent().find("ul.sub").slideDown('fast').show();
      $(this).parent().hover(function () {}, function () {
        $(this).parent().find("ul.sub").slideUp('slow');
      });
    }
  });
});

However when I hover on Menu1, the submenus for Menu 2 are still opening.

Any help will be very much appreciated!

Are you sure you want $(this).parent().find() rather than just $this.find() as with the first, you'll go to all the way to the top and search down for ul.sub — dash
– dash, Commented Jul 19, 2013 at 12:28
Why use javascript to control your menu? There are tons of css menus out there css3menu.com that will work even if the user has javascript disabled. — user2417483
– user2417483, Commented Jul 19, 2013 at 12:29
I added alert("has class"); underneath if ($("ul.top li").hasClass(".sub")) { but none of them are returning this alert, so it seems like the class is not found — JMon
– JMon, Commented Jul 19, 2013 at 12:36

colestrode · Accepted Answer · 2013-07-19 12:40:36Z

11

You have a couple of issues that need to be resolved. First, you should provide two arguments to the hover() function, the first is a function for onmouseenter, the other is for onmouseleave.

Next, just tag all sub menus with the same class, e.g., sub. This will make writing you selectors much easier.

Use the children() function to only apply the animation to direct children of the item that the user is hovering over.

$(document).ready(function () {
    $("ul.top li").hover(function () { //When trigger is hovered...
        $(this).children("ul.sub").slideDown('fast');
    }, function () {
        $(this).children("ul.sub").slideUp('slow');
    });
});

Working Example

edited Jul 19, 2013 at 12:40

answered Jul 19, 2013 at 12:34

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sheetal Over a year ago

how different is this answer from the post stackoverflow.com/questions/8228224/…

Manish Kumar Over a year ago

Why it dance sometimes up and down when moving mouse cursor on one side or another? by the way nice logic. I upvoted you for that.

Collectives™ on Stack Overflow

jQuery menu on hover open submenu

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related