Menu déroulant animé JavaScript

Question

J'essaie de créer un menu déroulant agissant comme sous-menu d'un menu principal. Le sous-menu est simplement un élément div contenant des éléments/liens. Quand un élément de menu principal est cliqué, le sous-menu descend et reste là. C'est facile, mais je veux que le sous-menu revienne si le curseur quitte le sous-menu. En d'autres termes, un simple événement "mouseout". Il semble cependant que lorsque le curseur entre dans l'un des éléments du sous-menu, l'événement 'mouseout' est déclenché. C'est ce que vous voudrez sauf, si vous y réfléchissez, car le curseur quitte l'élément du sous-menu même s'il ne quitte pas ses limites. Cependant, cela pose un problème, car je veux seulement que l'événement se déclenche si le curseur est déplacé en dehors des limites de l'élément du sous-menu.

Ce qu'il se résume à, est d'avoir un div dans un autre div, comme ceci:

---------------------------- 
|   DIV-1   | 
|       | 
|  -------------  | 
|  |   |  | 
|  | DIV-2 |  | AREA OUTSIDE DIV-1 
|  |   |  | 
|  |   |  | 
|  |   |  | 
|  -------------  | 
|       | 
|       | 
---------------------------- 

Maintenant, 2 choses peuvent provoquer DIV-1 à déclencher un événement 'mouseout':

1. le curseur se déplace à l'intérieur du boundries de DIV-1 à la zone en dehors de ces boundries
2. le curseur se déplace à l'intérieur du boundries de DIV-1 à la zone de DIV-2

Mon but est de pouvoir distinguer ces deux occurrences les unes des autres, mais je n'ai pas été capable de comprendre comment.

Quelqu'un at-il une bonne solution à ce problème? Cela semble une caractéristique assez commune, donc quelqu'un doit l'avoir résolu.

Answer 1

Depuis les événements mouseover à partir d'éléments de l'enfant bulle/propager aux parents, j'utiliser une minuterie qui est annulée en cas onmouseover du div du sous-menu, si j'allais la route non-bibliothèque:

var hideMenuTimer; 
subMenuDiv.onmouseover = function() { 
    window.clearTimeout(hideMenuTimer); 
} 
subMenuDiv.onmouseout = function (evt) { 
    evt = evt || window.event; 
    if ((evt.target || evt.srcElement).id == "subMenuDiv") 
     hideMenuTimer = window.setTimeout(function() { 
      subMenuDiv.style.display = "none"; 
     }, 300); 
} 

Un exemple très simple mais cela devrait fonctionner, en fournissant correctement tous les sous-éléments du sous-menu div bulle l'événement onmouseover à l'élément subMenuDiv puis le temporisateur est annulé avant d'être interrogé. En outre, j'ai mis 300ms de temps d'attente parce que je pense qu'il est préférable d'avoir ce genre de chose de sorte que si vous avez accidentellement mouseout vous avez une petite fenêtre pour récupérer la souris avant qu'elle ne se cache. Si vous voulez qu'il se cache instantanément, le réglage à 0ms devrait aussi bien fonctionner.

Answer 2

http://users.tpg.com.au/j_birch/plugins/superfish/ < - vous épargner le temps, il avait déjà tiré ses cheveux pour vous (peut-être pas littéralement, bien que, ne savent pas)