How to know when a pop-down menu needs to be closed

Question

I'm experimenting with pop-down menus (inside floating DIVs). Making them appear with onmouseover attributes is no problem, but I'm not sure how I can make the menu close properly.

I'm dealing with an image that has links mapped over it with <map>. I want people to see a menu when hovering over a link.

I figured the best way to know when to close the menu is wait until the mouse is no longer hovering over the HTML element that called the menu or the menu itself, then wait one second, and then close the menu.

Is my idea something that can be implemented, perhaps with some jQuery? Or is there a better and more efficient alternative?

Answer 1

with jquery:

$("your-menu-button-selector, your-menu-selector").bind("mouseleave", function(e){
  clearTimeout($(this).data("mouseleaveTimeout"));
  $(this).data("mouseleaveTimeout", setTimeout(function(){
     //your code
     //closeMenu();
  }, 1000)); //one second
});

you also want to clear the timeout when opening the menu!

$("your-menu-button-selector, your-menu-selector").bind("mouseenter", function(e){
  clearTimeout($(this).data("mouseleaveTimeout"));
  //your code
  //openMenu()
});

I understand it now, you can have the same thing apply also to the link and the menu box so that when hovering the options, it does not disappear.

Answer 2

I will throw my recommendation behind the jQuery hoverIntent plugin. Should be up and running quickly, very configurable, and no need to roll your own code.

Answer 3

I did some additional digging myself. http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

I need to somehow combine this with a <map> that makes parts of an image invoke a drop-down menu. Do you think this can get the job done?