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/