向上/向下滑動下拉菜單

Question

我希望主導航的子菜單在鼠標懸停時向下滑動並在鼠標滑出時向上滑動。

以下是頁面我的工作：http://jaspreetkaur.com/marg-moll/

以下是jQuery代碼我試圖製造出效果，但結果卻是有點怪。我不確定我在代碼中做了什麼錯誤。

$('nav > ul > li').hover(
    function(e) { 
     e.stopPropagation(); 
     $(this).find('ul').stop(true, true).slideDown(200); 
    }, 
    function(e) { 
     e.stopPropagation(); 
     $(this).find('ul').stop(true, true).slideUp(200); 
    } 
); 

Answer 1

我發現，問題涉及到我的CSS代碼，我使用的位置是：在錯誤的地方絕對的。現在工作正常。

感謝大家的快速幫助:)

Answer 2

我看到了您的網站，您使用的顏色非常好。反正你可以使用.slideToggle（「slow」）;而不是.slideDown（200）; API here 我希望這會幫助你。

Answer 3

我認爲weired，你在你提到的問題是關於你的滑動的動畫效果。

您可以使用更多的持續時間slideDown()和slideUp()，正如我以前所評論的那樣。

例如。

$(this).find('ul').stop(true, true).slideDown(1000); 

$(this).find('ul').stop(true, true).slideUp(1000); 

等等你喜歡什麼。

Answer 4

這裏有一個快速樣機：

HTML：

<li><a href="http://www.w3schools.com">Home</a></li> 
<li><a href="http://www.w3schools.com">Biographie</a> 
<ul>         
    <li><a href="http://www.w3schools.com">Einleitung</a></li> 
    <li><a href="http://www.w3schools.com">Matisse</a></li> 
    <li><a href="http://www.w3schools.com">Mein Portraitt</a></li>         
</ul> 
</li> 
<li><a href="http://www.w3schools.com">Werke</a></li> 

的JavaScript：

$(function() { 
    $("body li").each(function() { 
     if ($(this).find("ul").length > 0) {  

      $(this).mouseenter(function() { 
       $(this).find("ul").stop(true, true).slideDown(); 
      }); 

      $(this).mouseleave(function() { 
       $(this).find("ul").stop(true, true).slideUp(); 
      }); 

      $(this).find("ul").mousemove(function() { 
       $(this).stop(true, true).show(); 
      }); 
     } 
    }); 
});​ 

CSS

body ul{ 
    display: none; 
    position:absolute; 
    width: 40%;   
    background: #7ac0da; 
    border-top: 5px solid #7ac0da; 
    filter:alpha(opacity=80); 
    -moz-opacity:0.8; 
    -khtml-opacity: 0.8; 
    opacity: 0.8; 
} 
body ul li a{ 
    line-height: 3.1em; 
    color: white !important; 
} 

body ul li a:hover{  
    color: #D14836 !important; 
} 

body li{ 
float:left; 
margin: 5px; 
} 

你可以在這裏看到：http://jsfiddle.net/kHnpu/

個

問候