Question

我正在尝试创建一个至少有两级子菜单的水平菜单。所有子菜单都是垂直的。

子菜单1将直接位于其父级之下。所有后续子菜单级别（2+）应位于其父级的右侧。

我刚开始学习如何使用jQuery菜单，他们似乎没有为此进行自定义。我不确定如何处理此问题...我尝试了.menu() $("#myMenu .level1")上的<script> $(function() { $("#myMenu").menu({ position: { my: "left top", at: "left bottom" } }); }); </script>。

我的问题是 - 如果有人能指出我正如上所述制作菜单的正确方向，我将非常感激。

Javascript片段

<ui id="myMenu">
  <li class="level1">
    <a href="#">Item 1</a>
    <ul>
      <li class="level2">
        <a href="#">Item 1</a>
        <ul>
          <li class="level3">
            <a href="#">Item 1</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>

HTML片段

{{1}}

更新：JSbin

Answer 1

嗨，最后我有一个你的问题的答案。使用菜单的一些属性，如模糊和焦点。我发现这个页面已经有了解决方案http://forum.jquery.com/topic/how-to-make-the-perfect-horizontal-menu。我研究了这些行并将其应用到您的代码中。如果您对该功能有任何疑问，请随时提出。

在此处查看新代码http://jsbin.com/uxuTAba/5/。

Answer 2

伪码：

On mouseover of Menu Item, slidedown List (positioned right under Menu Item)
On mouseover of List Element, slidedown List Element X's Submenu (positioned to the right of X)

基本上我所说的是，用CSS定位菜单然后使用slideDown（）和slideUp（）动态显示它们。所以菜单定位根本不需要用jQuery来确定 - 只需要向上/向下滑动它们的显示状态。但它们都是相对于菜单定位的，使用基本CSS。

自定义jQuery子菜单定位

2 个答案: