jQuery 한 번에 열 수있는 드롭 다운 탐색 메뉴 라이브러리

Question

하버드의 웹 사이트와 비슷한 메뉴 동작을 구현하려고합니다 : http://www.seas.harvard.edu/computer-science 마우스를 놓은 링크에 관계없이 모든 섹션이 드롭 다운됩니다.

아무도 그들이 사용하고있는 것을 알고 있습니까? jQuery Superfish 메뉴에서 가장 가까운 메뉴를 찾을 수 있지만 한 번에 하나의 메뉴 섹션 만 열 수 있습니다.

미리 감사드립니다.

Answer 1

나는 내 의견에 대해 이야기 한 내용을 묘사하는 demo on JSFiddle을 만들었습니다. 당신이 찾고있는 특별한 결과는 일반적인 드롭 다운 메뉴의 간단한 수정입니다. 각각의 드롭 다운을 별도의 div로 만드는 대신 컨테이너 div에 넣고 드롭 다운이 필요할 때 표시합니다.

그래서 대신 :

<div id="drpDwn1"></div> 
<div id="drpDwn2"></div> 
<div id="drpDwn3"></div> 

당신은이 것 :

<div id="drpDwnFull"> 
    <div id="drpDwn1"></div> 
    <div id="drpDwn2"></div> 
    <div id="drpDwn3"></div> 
</div> 

당신은 전체 메뉴의 효과를 얻기 위해 대신 개별 항목의 drpDwnFull에 대한 가시성을 변경합니다.

원하는대로 강조 표시를 추가 할 수 있습니다. 내 데모에서는 메뉴 항목과 연결된 메뉴뿐만 아니라 마우스로 가리키고있는 개별 항목을 강조 표시하기도했습니다.