JavaScript Animated suspense menu

Question

Estou tentando criar um menu suspenso atuando como o submenu de um menu principal. O submenu é simplesmente um elemento div contendo itens/links. Quando um item de menu principal é clicado, o submenu cai e fica lá. Tudo isso é fácil, mas quero que o submenu deslize se o cursor deixar o submenu. Em outras palavras, um simples evento de 'mouseout'. Parece, no entanto, que quando o cursor entra em um dos itens dentro do submenu, o evento 'Mouseout' é acionado. É isso que você gostaria, se você pensar sobre isso, pois o cursor deixa o elemento submenu, mesmo que não deixe seus limites. No entanto, isso representa um problema, porque eu só quero que o evento dispare se o cursor for movido para fora dos limites do elemento submenu.

O que realmente se resume é ter uma div dentro de outra div, como esta:

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

Agora, 2 coisas podem fazer com que o Div-1 demitisse um evento 'Mouseout':

1. O cursor se move de dentro dos limites da DIV-1 para a área fora daqueles limites
2. O cursor se move de dentro dos limites de Div-1 para a área de Div-2

Meu objetivo é ser capaz de distinguir essas duas ocorrências uma da outra, mas não consegui descobrir como.

Alguém tem uma boa solução para esse problema? Parece um recurso comum o suficiente, então alguém deve ter resolvido.

Answer 1

Como os eventos do MouseOver de elementos filhos bolhas/propagam para os pais, eu usaria um cronômetro que é cancelado no evento OnMouseOver da div, se eu estivesse seguindo a rota não da 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);
}

Um exemplo muito simples, mas deve funcionar, fornecendo todos os sub -elementos da divisão do sub -menu, borbulham corretamente o evento OnMouseOver para o elemento submenudiv, o timer é cancelado antes das pesquisas. Além disso, eu coloquei um tempo limite de 300ms, porque acho melhor ter esse tipo de coisa para que, se você acidentalmente mouseout, você tem uma janela curta para recuperar o mouse antes que ele se esconda. Se você quiser se esconder instantaneamente, configurá -lo para 0ms também deve funcionar bem.

Answer 2

http://users.tpg.com.au/j_birch/plugins/superfish/ <- Salve a si mesmo o tempo, ele já puxou o cabelo para você (talvez não literalmente, porém, não sei)