자바 스크립트 애니메이션 드롭 다운 메뉴

Question

메인 메뉴의 하위 메뉴로 작동하는 드롭 다운 메뉴를 만들려고합니다. 하위 메뉴는 항목/링크를 포함하는 div 요소입니다. 주 메뉴 항목을 클릭하면 하위 메뉴가 드롭 다운되고 그대로 유지됩니다. 그게 다 간단하지만 커서가 하위 메뉴를 떠날 경우 하위 메뉴가 다시 슬라이드되기를 원합니다. 즉, 간단한 'mouseout'이벤트입니다. 그러나 커서가 하위 메뉴의 항목 중 하나에 들어가면 'mouseout'이벤트가 트리거되는 것으로 보입니다. 그게 당신이 그것에 대해 생각한다면, 그것이 경계표를 떠나지 않더라도 커서가 하위 메뉴 요소를 떠날 것이기 때문에 당신이 제외 할 것입니다. 그러나 커서를 하위 메뉴 요소의 경계 밖으로 이동하면 이벤트가 발생하기 때문에 문제가 발생합니다. 정말 귀결 무엇

은이 같은 다른 사업부 내부의 한 사업부, 데 :

: 이제

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

, 2 가지 DIV-1이 '로 마우스'이벤트가 발생 될 수 있습니다 그 boundries 외부 영역 DIV-1 boundries 내에서

1. 커서 이동 DIV -2-

의 면적 DIV-1 boundries 내에서

커서 이동

나의 목표는이 두 가지 현상을 서로 구별 할 수있는 것입니다. 그러나 나는 그 방법을 파악하지 못했습니다.

누구든지이 문제에 대한 좋은 해결책이 있습니까? 그것은 공통적 인 기능으로 보입니다. 따라서 누군가가 해결해야합니다.

Answer 1

자식 요소 거품에서 마우스 오버 이벤트 이후/부모에게 전파, 나는 비 라이브러리 경로를가는 경우, 하위 메뉴의 DIV의 onMouseover와 이벤트 취소 타이머 사용한다 :

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 요소로 올바르게 버블 링 한 다음 타이머가 폴링되기 전에 취소됩니다. 또한, 내가 이런 종류의 일을하는 것이 가장 좋다고 생각하기 때문에 300ms 제한 시간을 두었습니다. 실수로 마우스를 움직이면 숨기기 전에 마우스를 다시 가져올 수있는 짧은 창이 있습니다. 즉시 숨기고 싶다면 0ms로 설정하면 잘 작동합니다.

Answer 2

http://users.tpg.com.au/j_birch/plugins/superfish/ < - 자신에게 시간을 절약, 그는 이미 (아마도 문자 그대로,하지만, 모르겠어요)