javascript keep sub navigation bar open on hover

Question

I created a fiddle

jsfiddle.net/ExaLM/1

Now the sub navigation bar is closing on mouse leave event.

But if I hover on sub link bar then also sub link bar closes.

So what changes should I make in my code for that?

code is

          $(document).ready(function(){                     
    $("#main-nav li a.main-link").hover(function(){  

        $("#main-nav li a.main-link").removeClass("active");                                                   
        $(this).addClass("active");                                        
        $("#sub-link-bar").animate({  
            height: "40px"                       
        });  
        $(".sub-links").hide();  
        $(this).siblings(".sub-links").fadeIn();  
    });  
    $("#main-nav li a").mouseleave(function(){  
        $("#main-nav li a.main-link").removeClass("active");                                                                                       
        $(".sub-links").fadeOut();  
        $("#sub-link-bar").animate({  
            height: "10px"                       
        });       

    });   
});

Gourav · Accepted Answer · 2013-12-28 18:11:57Z

1

I updated your Fiddle

Basically, what you want is to avoid hiding the elements when the mouseleave event is fired. To do so, you could bind on both the a.main-link and its <ul> element, or you can do it like I did: bind your jQuery events on the whole <li> so mouseleave is not triggered until you leave both the main link or the sub-links, as it is contained in the whole <li>. I had to change hover to mouseenter to avoid it being fired repeatedly.

I also had to add some .stop() to avoid the animation repeating entirely every time the mouse gets out of the menu and bounce a few times before finally stopping. You should also remove the .hide() because sometimes when moving the mouse fast, the elements are still visible when they are hidden and it makes it look jerky.

I hope this is enough for you to figure out how to fix your menu.

edited Dec 28, 2013 at 18:11

Gourav

1,7842 gold badges15 silver badges18 bronze badges

answered Dec 28, 2013 at 18:08

Max-P

3382 silver badges11 bronze badges

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

1 Comment

Mohamed Anis Dahmani Over a year ago

mouseenter was a clver move!

Collectives™ on Stack Overflow

javascript keep sub navigation bar open on hover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related