jQuery: how to implement this roll-out effect?

Question

I need some help to implement this roll over / out effect.

This is the screenshot: http://dl.dropbox.com/u/72686/roll-over-out.png

I have a menu. When I roll over the item "Products" the popup block appears below it, with a tree with all products.

<div id="menu">
   <div id="product"> Roll over here </div>
   ...
</div>

<div id="popup">
  <div>  <a> link </a> </div>
  <div>  <a> link </a> </div>
  <div>  <a> link </a> </div>
  ...
</div>

This block has css:

#popup {
position:fixed
display:none
}

Now, it is clear how to implement roll over to show the block:

("#product").mouseover(function() { 
                $('#popup').css("display","block");
            })

However how can I handle the rollout ? I have the following issues:

1) If I add roll-out to the menu item "#product", when I roll-out from it (to move to the popup with product trees), I make this last one to disappear (because I'm leaving the menu item).

2) If I add roll out functionality to the popup, I have issues with his children. ie If I move the mouse over a link of the tree, the popup disappear (because I'm leaving the parent #popup).

thanks

ps. I cannot use :hover (it is not supported by jquery version on Drupal CMS).

Answer 1

Firstly I think you will find that mouseenter and mouseleave are better events for this kind of thing. See the jQuery example in IE to understand why, not a huge problem but you may end up wit flickering otherwise.

However that will still not solve your problem. I would suggest use a setTimeout to close the menu, and then if your mouse enters the menu before the time out cancel the time out:

var t;
$("#product").mouseleave(function() { 
            t = setTimeOut(function(){$('#popup').hide();}, 100);
        })

$("#popup").mouseenter(function() {
    if(t)
        {
            clearTimeout(t);
            t=null;
        }});

This will prevent the popup from closing if you move from the product element to the pop up element. The clear timeout method prevents the timeout function from being executed.

Answer 2

详尽的教程： 下拉菜单

Answer 3

I have created similar solution, you can check it out here . See the demo here .

Answer 4

By the way, :hover isn't jQuery - it's CSS. http://www.w3schools.com/cssref/sel_hover.asp