javascript - 如何像这个 Flash 示例一样制作 Javascript 左菜单/面板 slider ？

Question

如何在垂直 slider 中制作基于 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/