垂直滑動菜單欄

Question

好吧，我想創建一個垂直滑動，我得到一個幾乎工作的方式，我想。這是一個非常簡單的代碼。有3個問題，但：

• 我需要關閉的子菜單，當第一次加載頁面
• 如果您快速通過鏈路懸停在子菜單會開始滑動像瘋了似的。我需要它變得更加流暢，並不斷開啓和關閉。它非常敏感
• 如果您將鼠標懸停在屏幕上的任何位置，並且向下滑動的鏈接將滑動。我需要它滑動只有當你滑過它自己的鏈接

這裏的代碼：謝謝！

<script type='text/javascript'> 
$(document).ready(function(){ 
$("nav.main_menu li").hover(function(){ 
    $(this).children("ul").slideDown(500); 
},function(){ 
$(this).children("ul").slideUp(300);  
}); 
}); 
</script> 


<nav class="main_menu"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">News</a> 
<ul class="sub-menu"> 
<li><a href="#">Events</a></li> 
<li><a href="#">Updates</a></li> 
</ul> 
</li> 
<li><a href="#">People</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Gallery</a> 
<ul class="sub-menu"> 
<li><a href="#">2009</a></li> 
<li><a href="#">2010</a></li> 
<li><a href="#">2011</a></li> 
<li><a href="#">2012</a></li> 
<li><a href="#">2013</a></li> 
<li><a href="#">2014</a></li> 
<li><a href="#">2015</a></li> 
</ul> 
</li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Bio</a></li> 

       </ul> 
      </nav> 

Answer 1

• 爲了使子菜單關閉，無論是對他們的CSS設置爲display:none;或做$("li ul").hide();的.ready()函數內定義懸停位之前。
• 這是這種風格的懸停菜單的一個不幸的副作用。有一個叫做HoverIntent的jQuery插件，我之前用它來幫助這個，但最終我沒有做任何動畫，因爲它太棘手，不能很好地完成。
• 聽起來好像li元素橫跨頁面的很大一部分比可見。你可能想看看你的CSS，並限制它們的高度或寬度。只要overflow:hidden沒有設置，子菜單仍應該出現。