Javascript 왼쪽 메뉴/패널 슬라이더를 만들려면 어떻게해야합니까?이 플래시 예제처럼?

Question

수직 슬라이더에 기반한 UL LI (Javascript/jquery) 메뉴는 어떻게 만들 수 있습니까?

제 플래시 예제를보고 제발 도와주세요.

http://beeitltd.com/dev/nrsb/demo/slide2.html

나는 예와 같이 3 단계 메뉴를 확인해야합니다. 모든 메뉴 항목은 CMS에서 동적으로 나타납니다. 여기에는 메뉴 시스템 구조가 포함되어 있습니다. 아주 잘 작동 - -

<div id="mergefield_navigation_level2" class="TBM0DB9CFDD0L_XML"> 
    <ul id="nav"> 
    <li><a id="page618" href="Forside.618.aspx" class="level1">Forside</a> 
     <ul> 
     <li><a id="page671" href="Integration.671.aspx" class="level2">Integration</a> 
      <ul> 
      <li><a id="page831" href="Level2-a.831.aspx" class="level3">Level2-a</a> 
       <ul> 
       <li><a id="page834" href="Level-3---b.834.aspx" class="level4">Level 3 - b</a> 
       </li> 
       <li><a id="page835" href="Level-3---c.835.aspx" class="level4">Level 3 - c</a> 
       </li> 
       </ul> 
      </li> 
      <li><a id="page832" href="level2-b.832.aspx" class="level3">level2-b</a> 
       <ul> 
       <li><a id="page836" href="Level-3---a.836.aspx" class="level4">Level 3 - a</a> 
       </li> 
       <li><a id="page837" href="Level-3---b.837.aspx" class="level4">Level 3 - b</a> 
       </li> 
       <li><a id="page838" href="Level-3---c.838.aspx" class="level4">Level 3 - c</a> 
       </li> 
       </ul> 
      </li> 
      <li><a id="page839" href="level2-c.839.aspx" class="level3">level2-c</a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a id="page830" href="datasnippets.830.aspx" class="level1">datasnippets</a> 
     <ul> 
     <li><a id="page671" href="Integration.671.aspx" class="level2">Integration</a> 
      <ul> 
      <li><a id="page831" href="Level2-a.831.aspx" class="level3">Level2-a</a> 
       <ul> 
       <li><a id="page834" href="Level-3---b.834.aspx" class="level4">Level 3 - b</a> 
       </li> 
       <li><a id="page835" href="Level-3---c.835.aspx" class="level4">Level 3 - c</a> 
       </li> 
       </ul> 
      </li> 
      <li><a id="page832" href="level2-b.832.aspx" class="level3">level2-b</a> 
       <ul> 
       <li><a id="page836" href="Level-3---a.836.aspx" class="level4">Level 3 - a</a> 
       </li> 
       <li><a id="page837" href="Level-3---b.837.aspx" class="level4">Level 3 - b</a> 
       </li> 
       <li><a id="page838" href="Level-3---c.838.aspx" class="level4">Level 3 - c</a> 
       </li> 
       </ul> 
      </li> 
      <li><a id="page839" href="level2-c.839.aspx" class="level3">level2-c</a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Answer 1

필자는 CMS에서이 방법을 사용하면 쉽게 onMouseover와 수 트리거 이벤트를 변경할 수 있습니다 ->http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/