使用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手段有很大的包容性，所以少即是多：/