Comment savoir quand un menu déroulant doit être fermé

Question

J'expérimente des menus déroulants (à l'intérieur de DIVs flottants). Les faire apparaître avec onmouseover attributs n'est pas un problème, mais je ne suis pas sûr de savoir comment je peux fermer le menu correctement.

Je traite une image dont les liens sont mappés avec <map>. Je veux que les gens voient un menu en survolant un lien. J'ai pensé que la meilleure façon de savoir quand fermer le menu est d'attendre que la souris ne survole plus l'élément HTML qui a appelé le menu ou le menu lui-même, puis attendez une seconde, puis fermez le menu.

Est-ce que mon idée est quelque chose qui peut être implémenté, peut-être avec un peu de jQuery? Ou existe-t-il une alternative meilleure et plus efficace?

Answer 1

Je vais lancer ma recommandation derrière le plugin jQuery hoverIntent. Devrait être opérationnel rapidement, très configurable, et pas besoin de rouler votre propre code.

Answer 2

avec 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 
}); 

vous souhaitez également effacer le délai d'attente lors de l'ouverture du menu!

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

Je comprends maintenant, vous pouvez avoir appliquer la même chose aussi le lien et la boîte de menu de sorte que lors du survol des options, il ne disparaît pas.

Answer 3

J'ai fait quelques recherches supplémentaires. http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

Je dois en quelque sorte combiner cela avec un <map> qui fait des parties d'une image invoquent un menu déroulant. Pensez-vous que cela peut faire le travail?