수평 탐색 플라이 아웃 호버는

Question

내가에서 볼 수있는 기본 탐색 메뉴가 발행

<nav> 
    <ul> 
     <li>ABOUT 
      <ul class="sub-menu"> 
       <li>PEOPLE</li> 
       <li>APPROACH</li> 
      </ul> 
     </li> 
     <li>PROJECTS</li> 
     <li>CONTACT</li> 
    </ul> 
</nav>​ 

CSS의 :

nav li { display: inline-block } 
.sub-menu { display: inline-block; white-space: nowrap }​ 

JQuery와 :

(function($) { 
    $('.sub-menu').hide(); 

    $('nav li').on('hover', function(){   
     $('nav .sub-menu').animate({width: 'toggle'}); 
    }); 
})(jQuery);​ 

기능적으로 이것이 내가 원하는 방식입니다. '정보'와 '사람'/ '접근'위로 마우스를 이동하면 오른쪽으로 슬라이드됩니다.

가장 큰 문제는 튀어 나온 새 링크 중 하나를 가리키면 메뉴가 숨겨집니다. 어떻게 이런 일이 일어나지 않게 할 수 있습니까?

Answer 1

여기에 사람이 있습니다! 당신은 mouseenter와 mouseleave를 사용하고 싶습니다.

는 쉽게했다, 당신의 Fiddle

HTML을

<nav> 
<ul> 
    <li class='menu-header' >About 
     <ul class="sub-menu"> 
      <li>People</li> 
      <li>Approach</li> 
     </ul> 
    </li> 

    <li class='menu-header' >Contact 
     <ul class="sub-menu"> 
      <li>Email</li> 
      <li>Phone</li> 
     </ul> 
    </li> 

</ul> 
</nav> 

jQuery를

(function($) { 

    $('.sub-menu').hide(); 

    $('.menu-header').on({ 

     mouseenter: function() { 
      $(this).find('ul.sub-menu').stop().animate({width: 'toggle'}); 
     }, 

     mouseleave: function(){ 
      $(this).find('ul.sub-menu').stop().animate({width: 'toggle'}); 
     } 

    }); 


})(jQuery);