Korzystanie z jQuery-menu-cel

Question

Właśnie znalazłem: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown, i chcę go wdrożyć na mojej stronie, ale szczerze mówiąc nie wiem jak.

Czytałem dokumentację, i to w sposób następujący:

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

Ale nie jestem pewien, co należy zrobić.

Czy ten kod jQuery powinien znajdować się na stronie index.html w znaczniku <script>?

Dodatkowo, mam, że należy używać go jako to:

$("#menu").menuAim({ 
    activate: $.noop, // fired on row activation 
    deactivate: $.noop, // fired on row deactivation 
}); 

Ale skąd mam wiedzieć, jakiej klasy należy używać?

Moje menu kodu jest następujący:

<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

Nie wiem, co działa Twój klas css menu obecnie, ale aby to działa należy po prostu wymienić pustą funkcję jQuery z $ .noop taki, który działa z twoimi zajęciami. Coś wzdłuż następujących linii powinien działać (przy użyciu klasy NAV):

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

Answer 2

To jest po prostu demo kod ułożyła, bo nie był w stanie uzyskać mój znaczników do pracy, kiedy została ona zagnieżdżone. Musiałem umieścić elementy subnav w innym polu.

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

To jest czystsze i bardziej semantyczny niż co mikevoermans pisał (bez urazy).

Możesz zachować swoje zagnieżdżanie i nie musisz wykonywać dodatkowych var. Dodatkowo kierowanie według indeksu jest złe, bo co, jeśli jeden z twoich produktów nie ma podrzędnego.

Trzeba tylko określić wszystko odpowiednio. Zrobiłem to działając na stronie Natgeo, ale nie mogę połączyć się z nią, ponieważ jeszcze nie uruchomiliśmy.

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(); 
    } 
}); 

// kierunek może być: w lewo, w prawo, powyżej lub poniżej.

// bardziej tolerancja = mniej tolerant..it na tył i miss wiodącym ale to 0 środki mają dużo tolerancji, tak mniej więcej:/