jQuery-menu-aim을 사용합니다.

Question

방금 ​​발견했습니다 : http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown, 내 사이트에 구현하고 싶지만 솔직히 어떻게해야할지 모르겠군요.

나는 문서를 읽고, 다음과 같이이다 :

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

하지만 내가 무엇을해야하는지 모르겠어요.

이 jQuery 코드는 페이지의 <script> 태그에 있어야합니까?

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

을하지만 내가 무엇을 사용해야 수업 방법을 알고 :

또한, 나는이로 사용해야한다는거야? 다음과 같이

내 메뉴 코드입니다 : 나는 당신의 CSS는 메뉴가 작동하는 무슨 클래스와 모르겠지만, 얻을

<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

이 방금과 함께 빈의 jQuery 함수 $의 .noop를 교체해야합니다 작업 하나는 당신의 수업과 함께 작동합니다. 다음과 같은 라인을 따라 뭔가 (순자산 가치 (NAV) 클래스를 사용하여) 작동합니다 :

이

$(".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이 (악의) 게시되지 것보다 더 많은 의미이다.

중첩을 유지할 수 있으며 추가 var를 만들 필요가 없습니다. 또한 항목 중 하나에 서브 넷이없는 경우 색인으로 타겟팅하는 것이 좋지 않습니다.

그에 따라 모든 것을 지정하면됩니다. 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 수단이 너무 적은 더, 관용의 여지가있다 :/