2

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

Submenu1 将直接位于其父级下方。所有后续子菜单级别 (2+) 应位于其父级的右侧。

我刚刚开始学习如何使用 jQuery 菜单，而且他们似乎没有对此进行自定义。我不知道如何解决这个问题......我试过但没有打电话.menu()。$("#myMenu .level1")

我的问题是 - 如果有人能指出我上面所说的如何制作菜单的正确方向，我将不胜感激。

Javascript 片段

<script>
  $(function() {
    $("#myMenu").menu({
      position: {
        my: "left top",
        at: "left bottom"
      }
    });
  });
</script>

HTML 片段

<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>

更新：JSbin

4

2 回答 2

5

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

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

于 2013-10-18T21:23:05.277 回答
0

伪代码：

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。

于 2013-10-18T16:03:23.527 回答