slideDown()和slideUp()办法和css3过渡的下拉菜单后果

在网站的建筑中，经常需求做导航，简朴的下拉的菜单，能够尽量做得视觉上对照舒适。下拉菜单迟缓睁开。

能够用slideDown()和slideUp()完成。比方：
$(" .nav-wrap li").hover(function () {
$(this).children(".nav-box").slideDown();
}, function () {
$(this).children(".nav-box").slideUp();
});
还能够应用css3过渡的属性来完成如许的效果。如许就能够不消slideDown()和slideUp()办法，就只需求一些css代码就能完成如许的效果了，品牌SEO优化，这里过渡的用法对照根底，然则能够轻松的完成这里需求的效果，感觉成果很强盛。Css3了解不难，然则要用好不是那末随意草率，在此纪录一些这个对照根底的用法，今后持续起劲进修。这里需求在过渡的div.nav-box设置transform-origin: 0 0; 是设置这个元素的基点位置, 然后设置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: 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);
}