Анимированное выпадающее меню JavaScript

Question

Я пытаюсь создать раскрывающееся меню, действующее как подменю главного меню. Подменю - это просто элемент div, содержащий элементы/ссылки. Когда щелкнут элемент главного меню, подменю падает и остается там. Это все просто, но я хочу, чтобы подменю включалось, если курсор покидает подменю. Другими словами, простое событие mouseout. Однако, похоже, что когда курсор входит в один из элементов внутри подменю, запускается событие mouseout. Это то, что вы хотели бы, если подумать об этом, поскольку курсор покидает элемент подменю, даже если он не оставляет границ. Однако это создает проблему, потому что я хочу, чтобы событие срабатывало только при перемещении курсора за пределы границ элемента подменю.

Что это на самом деле сводится к тому, держит один DIV внутри другого DIV, как это:

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

Теперь, 2 вещи могут привести к ДИВ-1 сгореть 'MouseOut' событие:

1. курсор перемещается в пределах от boundries из DIV-1 к зоне за пределами этого boundries
2. курсор перемещается в пределах от boundries из DIV-1 к площади DIV-2

Моя цель - уметь отличать эти два вхождения друг от друга, но я не смог понять, как это сделать.

У кого-нибудь есть хорошее решение этой проблемы? Это кажется достаточно распространенной особенностью, поэтому кто-то должен ее решить.

Answer 1

С наведением мыши события из дочерних элементов пузыря/распространяться на родитель, я хотел бы использовать таймер, который будет отменен в OnMouseOver случае DIV вложенного меню, в если я буду не-библиотека по маршруту:

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

Очень простой пример, но он должен работать, предоставляя все подэлементы подменю div правильно вызывать событие onmouseover в элементе subMenuDiv, после чего таймер отменяется перед опросом. Кроме того, я установил тайм-аут в 300 мс, потому что я думаю, что лучше всего иметь такие вещи, чтобы, если вы случайно вытащили, у вас появилось короткое окно, чтобы вернуть мышь, пока он не скрывается. Если вы хотите, чтобы он спрятался мгновенно, установка его на 0ms тоже должна работать нормально.

Answer 2

http://users.tpg.com.au/j_birch/plugins/superfish/ < - сэкономить время, он уже вытащил свои волосы для вас (возможно, не в буквальном смысле, хотя, не знаю)