jQuery-menu-aim

Question

Kullanarak buldum: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown ve sitemde uygulamak istiyorum ama açıkçası bilmiyorum.

Ben belgeleri okuyun ve aşağıdaki gibi öyle:

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

Ama yapmam gerektiğinden emin değilim.

Bu jQuery kodunun index.html sayfasında yer alması gereken bir <script> etiketi içinde?

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

Ama kullanmalıyım hangi sınıf nasıl anlarım:

Ayrıca, ben bu gibi kullanması gerektiğini olsun? aşağıdaki gibi

My menü kodu: Ben senin css menü şu anda neyin işe yaradığını sınıfları ile bilmiyorum ama olsun

<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

bu sadece boş jQuery işlevi $ .noop değiştirmelidir çalışma sınıflarınızla çalışan bir tane. Aşağıdaki satırlar boyunca şey (nav sınıfını kullanarak) çalışması gerekir:

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

Answer 2

Bu ben iç içe zaman çalışmak benim işaretlemeyi almak mümkün değildi çünkü araya basitçe demo kodudur. Subnav öğelerini farklı bir kutuya koymam gerekiyordu.

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

Bu temizleyici ve mikevoermans (suç) yayınlanmıştır olandan daha anlamsal olduğunu.

İç içe geçmişinizi tutabilirsiniz ve ekstra değerler yapmanız gerekmez. Ayrıca, endeksle hedefleme yapmak kötüdür, çünkü öğelerinizden birinin bir altnavası yoksa.

Her şeyi buna göre belirlemelisiniz. Bir Natgeo sitesinde çalışıyorum ama henüz bağlantı kuramadım çünkü henüz başlamadık.

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

yön edilebilir //: sol, sağ, üstünde veya altında.

// daha tolerans = daha az tolerant..it en geriye ve lider özlediğimi ama bu 0 vasıta böylece less is more, hoşgörü çok şey var var:/