自定义 jQuery 子菜单定位

问题描述

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

I am trying to create a horizontal menu that has at least two levels of submenus. All submenus are vertical.

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

Submenu1 will be directly below its parent.All subsequent submenu levels (2+) should be to the right of its parent.

我刚刚开始学习如何使用 jQuery 菜单，他们似乎没有对此进行自定义.我不知道如何解决这个问题......我尝试并未能在 $("#myMenu .level1") 上调用 .menu().

I am just starting to learn how to use jQuery menu, and they don't seem to have a customization for this. I am not sure how to approach this... I tried and failed to call .menu() on $("#myMenu .level1").

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

My question is - I would much appreciate if someone can point me in the right direction on how to make the menu as I have stated above.

Javascript 代码段

Javascript snippet

<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

推荐答案

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

Hi finally i have an answer for your question. Using some properties of the menu like blur and focus. I found this page that already has the solution http://forum.jquery.com/topic/how-to-make-the-perfect-horizontal-menu. I studied those lines and applied it in your code. If you have any question about the functionality feel free to ask.

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

这篇关于自定义 jQuery 子菜单定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！