垂直スライディングメニューバー

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

• いずれか、サブメニューが閉じた状態にするあなたがホバービットを定義する前にdisplay:none;に彼らのためにCSSを設定したり、.ready()関数の内部で$("li ul").hide();を行うには。
• これは、このスタイルのホバーメニューの残念な副作用です。これを助けるために私が以前使っていたHoverIntentというjQueryプラグインがありますが、結局のところいいアニメーションをやっていないというのは、やっかいなことです。
• liの要素が、ページのかなり大きな部分に見えるように見えます。 CSSをチェックアウトして、その高さや幅を制限することができます。 overflow:hiddenが設定されていない限り、サブメニューは引き続き表示されます。