如何像下面的Flash示例一样使Javascript左侧菜单/面板滑块？

Question

如何在垂直滑块中创建基于UL LI的（Javascript / jquery）菜单？

请查看我的Flash示例，然后请帮助我。

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 /