animada menú desplegable JavaScript

Question

Estoy intentando crear un menú desplegable que actúa como el submenú de un menú principal. El sub-menú es simplemente un elemento div que contiene artículos / enlaces. Cuando se hace clic en un elemento del menú principal, el sub-menú se despliega y se queda allí. Eso es todo fácil, pero quiero que el submenú se deslice hacia atrás para arriba si el cursor sale del submenú. En otras palabras, un simple 'mouseOut' evento. Parece, sin embargo, que cuando el cursor entra en uno de los elementos dentro del submenú, el evento 'mouseout' se dispara. Eso es lo que le Excepto, si se piensa en ello, cuando el cursor sale el elemento de submenú a pesar de que no deja sus limites. Sin embargo, esto plantea un problema, porque sólo desea que el evento se dispara si el cursor se mueve fuera de los limites del elemento de submenú.

Lo que realmente se reduce a, es tener uno dentro de otro div div, así:

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

Ahora, 2 cosas pueden causar DIV-1 para disparar un evento 'mouseout':

1. El cursor se mueve desde dentro de los limites de DIV-1 a la zona exterior esos limites
2. El cursor se mueve desde dentro de los limites de DIV-1 a la zona de DIV-2

Mi objetivo es ser capaz de distinguir estas dos ocurrencias entre sí, sin embargo, no han sido capaces de encontrar la manera.

¿Alguien tiene una buena solución para este problema? Parece una característica bastante común, por lo que alguien debe haber resuelto.

Answer 1

Dado que los eventos mouseover de elementos secundarios de la burbuja / propagan a los padres, me gustaría utilizar un temporizador que se cancela en caso de onmouseover div del submenú, si iba la ruta no biblioteca:

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 ejemplo muy simple pero debería funcionar, proporcionando todos los elementos sub del sub menú div correctamente la burbuja del evento onmouseover al elemento subMenuDiv entonces el temporizador se cancela antes de las encuestas. Además, me he puesto un tiempo de espera de 300 ms porque creo que es mejor tener este tipo de cosas por lo que si accidentalmente mouseOut usted tiene una ventana corta para conseguir el ratón de nuevo antes de que oculta. Si usted quiere que ocultar al instante, poniéndolo a 0 ms debería funcionar bien también.

Answer 2

http://users.tpg.com.au/j_birch/plugins/ superfish / <- ahorrarse el tiempo, que ya sacó su pelo para usted (tal vez no literalmente, sin embargo, no sé)