CODEWITHSUNDEEP
jqueryhtmlhoverdrop-down-menu
user759235
user759235

Reputation: 2207

dropdown hover issue(jQuery)

I have made a simple dropdown menu, this works fine but i want to add some space between the button and the dropdown menu(between bottom button/link and top dropdown menu).

The issue, if i dont add space between the button and dropdown menu it works fine, but once that i add space between them the dropdown menu goes back to hide once i leave the button.

I can make the li taller on hover but the li has style attached to it so i cant do much with this(also the a elements has fixed style attached to it).

So how can i keep the dropdown menu alive if its got space between it if i hover its parent li?

The jQuery code

    $('#sub-menu li').hover(function(){
        $(this).children('ul').stop(true,true).fadeIn(100);
    },function(){
        $(this).children('ul').stop(true,true).fadeOut(100);
    });

Basic html code

<div>
    <ul>
        <li><a href="#">link</a>
            <ul>
                <li>dropdown menu</li>
                <li>dropdown menu</li>
                <li>dropdown menu</li>
            </ul>
        </li>
    </ul>
</div>

Upvotes: 0

Views: 1418

Answers (3)

Dave
Dave

Reputation: 1

The simple answer is to just increase the bottom padding in your <LI> tags for the top level links. create a new class specifically for them or add it on-the-fly, like this:

   <li style="padding-bottom: 8px;">

Upvotes: 0

James Montagne
James Montagne

Reputation: 78750

I think I understand, although the css would be very helpful here. I believe your child ul has position:abosolute and you have a hover on the parent li. When the two are together, you can move your mouse from one to the other without leaving the li but once you put a gap between the two, moving your mouse from the link to the ul menu leaves the parent li causing the mouseleave to fire.

The way I would probably deal with this would be as follows. Instead of re-positioning the child ul, wrap that ul in a div. Put a padding-top on the div with as much space as you want. Then move all of the positioning css and jquery stuff to show/hide/position the div instead. In this way, going from the link to the menu ul would not hit empty space and hide, it would instead move into the transparent div which is still part of the parent li and the menu would not hide.

Hope that helps, again css would be helpful to see exactly what you're doing.

EDIT: Created a fiddle to demonstrate the idea. The first link shows the problem, 2nd shows the fix, with a border to show what's actually happening and the 3rd is the actual fix.

http://jsfiddle.net/fTmLh/

Upvotes: 1

RwwL
RwwL

Reputation: 3308

The typical way to do this is to set up a timer to close the submenu on the parent's mouseleave event, but cancel the timer if you mouseenter on the submenu. Setting this timer for 150-250ms usually gives plenty of time for a moderately slow-moving mouse to preserve the intended behavior, but doesn't feel too laggy when the menu is intended to close.

Not tested, more like pseudocode, just to show the general approach:

var submenuTimer = null;

$('#sub-menu li')
   .mouseenter(function(){
      $(this).children('ul').stop(true,true).fadeIn(100);
   })
   .mouseleave(function{
      submenuTimer = 
       setTimeout(
        function(){ $(this).children('ul').stop(true,true).fadeOut(100) }, 200
       );
   }); 

$('#sub-menu li ul').mouseenter(function(){ clearTimeout(submenuTimer });

Upvotes: 1

Related Questions