在网站的制作中,经常需要做导航,简单的下拉的菜单,可以尽量做得视觉上比较舒服。下拉菜单缓慢展开。
![CSS代码](/upload/pic19/56YJJZ2E.png)
可以用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);
}
![网站导航](/upload/pic19/68MDsnhz.png)
分享名称:slideDown()和slideUp()方法和css3过渡的下拉菜单效果
标题链接:https://www.cdcxhl.com/news/239035.html
成都网站建设公司_创新互联,为您提供网站改版、全网营销推广、做网站、网站收录、网站营销、网站策划
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联