在網(wǎng)站的制作中，經(jīng)常需要做導(dǎo)航，簡(jiǎn)單的下拉的菜單，可以盡量做得視覺(jué)上比較舒服。下拉菜單緩慢展開(kāi)。
 

可以用slideDown()和slideUp()實(shí)現(xiàn)。例如：
$(" .nav-wrap  li").hover(function () {            
$(this).children(".nav-box").slideDown();
 }, function () {
$(this).children(".nav-box").slideUp();
 });
還可以使用css3過(guò)渡的屬性來(lái)實(shí)現(xiàn)這樣的效果。這樣就可以不用slideDown()和slideUp()方法，就只需要一些css代碼就能實(shí)現(xiàn)這樣的效果了，這里過(guò)渡的用法比較基礎(chǔ)，但是可以輕松的實(shí)現(xiàn)這里需要的效果，感覺(jué)功能很強(qiáng)大。Css3理解不難，但是要用好不是那么容易，在此記錄一些這個(gè)比較基礎(chǔ)的用法，以后繼續(xù)努力學(xué)習(xí)。這里需要在過(guò)渡的div.nav-box設(shè)置transform-origin: 0  0; 是設(shè)置這個(gè)元素的基點(diǎn)位置, 然后設(shè)置transition，令這個(gè)過(guò)程有了動(dòng)畫(huà)的效果。
.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: 0  0;
-ms-transform-origin: 0  0;
-moz-transform-origin: 0  0;
-webkit-transform-origin: 0  0;
transform-origin: 0  0;
 
-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);
}