導航欄二級下拉菜單的js特效

不少大型的網站的導航菜單欄會有二級菜單，那麼剛開始的時候這些二級菜單是隱藏的，咱們經過鼠標點擊或者把鼠標放在上面就會讓二級菜單顯示，有些二級菜單會有一些動畫效果，咱們今天講的是二級菜單從上面慢慢下滑並出來，以一個很平滑的方式出場，相比傳統的直接出現更有交互性。

今天這裏我主要說的是一個js特效，經過鼠標放在上面，讓導航欄改變顏色，而且讓二級菜單從上面緩慢平滑的出現，有一個效果，這個效果的實現其實也很簡單，就是讓二級菜單初始狀態爲全透明，咱們經過js改變它的透明度和位置，從而讓它實現，從無到有，從上面平滑出來的效果。

附上js代碼：

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$("#Menu ul li").hover(function(){

var _this=$(this)

t=setTimeout(function(){

_this.addClass("active");//添加class=active

_this.find(".nav").animate({opacity:1,"top":"50px"},500);

},300);

//鼠標滑上去時

},function(){

clearTimeout(t);

//鼠標移開時

$(this).removeClass("active");

$(this).find(".nav").animate({opacity:0,"top":"0px"},500);

});

</script>