在網站的制作中，經常需要做導航，簡單的下拉的菜單，可以盡量做得視覺上比較舒服。下拉菜單緩慢展開。

可以用slideDown()和slideUp()實現。例如：
$(" .nav-wrapli").hover(function () {
$(this).children(".nav-box").slideDown();
}, function () {
$(this).children(".nav-box").slideUp();
});
還可以使用css3過渡的屬性來實現這樣的效果。這樣就可以不用slideDown()和slideUp()方法，就只需要一些css代碼就能實現這樣的效果了，這里過渡的用法比較基礎，但是可以輕松的實現這里需要的效果，感覺功能很強大。Css3理解不難，但是要用好不是那么容易，在此記錄一些這個比較基礎的用法，以后繼續努力學習。這里需要在過渡的div.nav-box設置transform-origin: 00;是設置這個元素的基點位置, 然后設置transition，令這個過程有了動畫的效果。
.nav.nav-box {
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
-moz-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
position: absolute;
width: 100%;
background: #fff;
top: 100px;
left: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.nav-wrap.nav-box{
-o-transform-origin: 00;
-ms-transform-origin: 00;
-moz-transform-origin: 00;
-webkit-transform-origin: 00;
transform-origin: 00;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.nav-wrap li:hover .nav-box{
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
-moz-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}

當前名稱：slideDown()和slideUp()方法和css3過渡的下拉菜單效果
轉載注明：http://m.2m8n56k.cn/news35/239035.html

成都網站建設公司_創新互聯，為您提供移動網站建設、App開發、靜態網站、網站改版、服務器托管、定制開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯