CODEWITHSUNDEEP
jquerydrop-down-menu
Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

Stop closing the dropdown menu on Hover

I have a dropdown menu that shows on hover. The menu becomes hidden again after I mouse away from it and I can't click on any of submenus.

$('.toggle-menu').on('hover',function(e){
        e.preventDefault();
        $(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp();
        $(this).toggleClass('show').next().slideToggle();
        e.stopPropagation();
});

How can I stop closing the dropdown menu if the mouse is hover the dropdown container?

My jsFiddle Example

Any help is greatly appreciated! Thank you so much!

Upvotes: 1

Views: 4988

Answers (5)

chrisarton
chrisarton

Reputation: 4441

The mouseover solution has a slight problem if you hit the menu too quick while it is sliding.

Use the li as a parent:

$('.toggle-menu-parent').on('hover', function(e){    
        e.preventDefault();

        $(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();

        $(this).find('.toggle-menu').toggleClass('active').next().slideToggle();

    e.stopPropagation();
});

http://jsfiddle.net/3uLxb/16/

Upvotes: 2

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

js

$('.toggle').on('hover',function(e){
        e.preventDefault();
        $(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();
        $(this).find('.toggle-menu').toggleClass('active').next().slideToggle();
        e.stopPropagation();
});

html

<ul class="nav">
    <li class="toggle">
        <a href="#" class="toggle-menu"><span></span>MENU 1</a>
        <ul class="menu1">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </li>
    <li class="toggle">
        <a href="#" class="toggle-menu"><span></span>MENU 2</a>
        <ul class="menu2">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
        </ul>
    </li>
</ul>

http://jsfiddle.net/3uLxb/15/

Upvotes: 3

McPhelpsius
McPhelpsius

Reputation: 253

Actually, what you should do is encapsulate your <li>s in divs with overflow:hidden and your height set that only the "Menu" item showing.

On hover you should animate your height downward to show all <li>s. You won't need to mouseover or mouseout separately if you are selecting the <div> as your jQuery element.

Upvotes: 1

developerCK
developerCK

Reputation: 4506

use mouseover and mouseout event to handle this.

$('.toggle-menu').on('mouseover',function(e){...

check this http://jsfiddle.net/nkNUz/ use mouseout event to hide according to your logic

Upvotes: 1

Joao Palma
Joao Palma

Reputation: 126

use mouseover instead of hover

change

$('.toggle-menu').on('hover',function(e){

to

$('.toggle-menu').on('mouseover',function(e){

Upvotes: 4

Related Questions