使用jQuery-menu-aim

Question

我刚刚发现：http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown，我想在我的网站上实现它，但坦率地说，我不知道如何。

我阅读文档，并且其计算方法如下：

• https://github.com/kamens/jQuery-menu-aim

但我不知道我应该做的。

jQuery这个jQuery这个代码应该位于<script>标记的index.html页面上吗？

此外，我得到我应该把它作为这样的：

​​

但是我怎么知道我应该用什么课？

我的菜单代码如下：

<h3 class="demo-panel-title">Menu</h3> 
    <div class="row demo-row"> 
    <div class="span9"> 
     <div class="navbar navbar-inverse"> 
     <div class="navbar-inner"> 
      <div class="container"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"> 
       <li> 
        <a href="#"> 
        Menu Item 
        <span class="navbar-unread">1</span> 
        </a> 
       </li> 
       <li class="active"> 
        <a href="#"> 
        Messages 
        <span class="navbar-unread">1</span> 
        </a> 
        <ul> 
        <li><a href="#">Element One</a></li> 
        <li> 
         <a href="#">Sub menu</a> 
         <ul> 
         <li><a href="#">Element One</a></li> 
         <li><a href="#">Element Two</a></li> 
         <li><a href="#">Element Three</a></li> 
         </ul> <!-- /Sub menu --> 
        </li> 
        <li><a href="#">Element Three</a></li> 
        <li> 
         <a href="#">Sub menu</a> 
         <ul> 
         <li><a href="#">Element One</a></li> 
         <li><a href="#">Element Two</a></li> 
         <li><a href="#">Element Three</a></li> 
         <li><a href="#">Element One</a></li> 
         <li><a href="#">Element Two</a></li> 
         <li><a href="#">Element Three</a></li> 
         </ul> <!-- /Sub menu --> 
        </li> 

        </ul> <!-- /Sub menu --> 
       </li> 
       <li> 
        <a href="#"> 
        About Us 
        <span class="navbar-unread">1</span> 
        </a> 
       </li> 
       </ul> 
      </div><!--/.nav-collapse --> 
      </div> 
     </div> 

Answer 1

我不知道什么类你的CSS菜单当前工作，但得到这个工作，你应该只是更换空的jQuery函数$ .noop一个与你的课程一起工作的人。 东西沿着以下行应该工作（使用导航类）：

$(".nav").menuAim({ 
    activate: function(a){$(a).addClass("submenu-visible")}, 
    deactivate: function(a){$(a).removeClass("submenu-visible")}, 
}); 

Answer 2

这是一个简单的演示代码，我放在一起，因为我不能让我的标记，当它被嵌套的工作。我不得不把subnav项目放在不同的盒子里。

http://codepen.io/mikevoermans/pen/EtKxp

HTML

<ul id="main_nav"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
      <li><a href="#">Item 4</a></li> 
      <li><a href="#">Item 5</a></li> 
     </ul> 


     <div id="flyouts"> 

      <ul class="sub-menu"> 
       <li><a href="#">Sub Item 1</a></li> 
       <li><a href="#">Sub Item 2</a></li> 
       <li><a href="#">Sub Item 3</a></li> 
       <li><a href="#">Sub Item 4</a></li> 
      </ul> 

      <ul class="sub-menu"> 
       <li><a href="#">Sub Item 1</a></li> 
       <li><a href="#">Sub Item 2</a></li> 
       <li><a href="#">Sub Item 3</a></li> 
       <li><a href="#">Sub Item 4</a></li> 
       <li><a href="#">Sub Item 5</a></li> 
       <li><a href="#">Sub Item 6</a></li> 
       <li><a href="#">Sub Item 7</a></li> 
       <li><a href="#">Sub Item 8</a></li> 
      </ul> 

      <ul class="sub-menu"> 
       <li><a href="#">Sub Item 1</a></li> 
       <li><a href="#">Sub Item 2</a></li> 
       <li><a href="#">Sub Item 3</a></li> 
       <li><a href="#">Sub Item 4</a></li> 
       <li><a href="#">Sub Item 5</a></li> 
       <li><a href="#">Sub Item 6</a></li> 
       <li><a href="#">Sub Item 7</a></li> 
      </ul> 

      <ul class="sub-menu"> 
       <li><a href="#">Sub Item 1</a></li> 
       <li><a href="#">Sub Item 2</a></li> 
      </ul> 

      <ul class="sub-menu"> 
       <li><a href="#">Sub Item 1</a></li> 
       <li><a href="#">Sub Item 2</a></li> 
       <li><a href="#">Sub Item 3</a></li> 
       <li><a href="#">Sub Item 4</a></li> 
      </ul> 

     </div> 
     <!-- /#flyouts --> 

JS

$("#main_nav").menuAim({ 
    activate: function(a){ 
     var idx = $(a).index(); 
     $('#flyouts ul').eq(idx).show(); 
    }, // fired on row activation 
    deactivate: function(a){ 
     var idx = $(a).index(); 
     $('#flyouts ul').eq(idx).hide(); 

    } // fired on row deactivation 
}); 

Answer 3

这是更清洁，比mikevoermans发布（无犯罪）更多的语义。

你可以保持你的嵌套，你不必做额外的变种。另外，按索引定位不好，因为如果其中一个项目没有subnav会怎么样。

你只需要相应地指定一切。我在Natgeo网站上工作，但我无法链接到它，因为我们还没有启动。

HTML：

<nav id="main-nav"> 
<ul> 
    <li class="parentnav"> 
     <a>Parent</a> 
     <ul class="subnav"> 
      <li><a href="" title="">child</a></li> 
      <li><a href="" title="">child</a></li> 
     </ul> 
    </li> 
    </li> 
     <a>Parent</a> 
    </li> 
    <li class="parentnav"> 
     <a>Parent</a> 
     <ul class="subnav"> 
      <li><a href="" title="">child</a></li> 
      <li><a href="" title="">child</a></li> 
     </ul> 
    </li> 
</ul></nav> 

JS：

$("#main-nav").menuAim({ 
    rowSelector: "li.parentnav", 
    submenuDirection: "below", 
    tolerance: 0, 
    activate: function(a){ 
     $(a).children('.subnav').show(); 
    }, 
    deactivate: function(a){ 
     $(a).children('.subnav').hide(); 
    } 
}); 

//方向可以是：左，右，上面或下面。

//更宽容=少tolerant..it的倒退而错过领先，但仅此而已 0手段有很大的包容性，所以少即是多：/