runsly 技术分享 2022-03-14

超赞的CSS3动画下拉菜单

今天分享几个最近看到的比较实用的CSS3带动画的下拉菜单效果，实现出来的效果跟使用jQuery的slideDown和fadeIn有得一比，效果非常赞，本人推荐各位以后可以使用下面的几种效果，一定会给你的前端开发带来不少亮点的。如果需要更多效果可以看之前的文章：CSS3下拉菜单模板上面的这个下拉菜单就是纯CSS3实现的跟使用jquery中的fadeIn和slideDown可以一比的菜单效果。一起来看看实现代码思路：常规的下拉菜单列表就不说了，主要是说这个二级菜单的动画效果代码。

.site-navigation ul ul{min-width: 100px; position: absolute; left:0; top:100%; visibility: hidden; opacity: 0; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; margin-top:20px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: #F0F0F0;}
.site-navigation ul li:hover > ul{visibility: visible; opacity: 1; margin-top:0;}
.site-navigation ul ul ul{ left:100%; top:0; margin-top: 0; margin-left: 20px;}
.site-navigation ul ul li:hover > ul{margin-left:0;}

上面重点标注的代码就是这个菜单动起来的代码了。以前用CSS写的菜单总是很死板，今后抛开IE6，使用单纯的CSS3也可以让菜单动起来了。演示地址
这个效果也很赞，通过让下拉菜单逐渐下推出来，形成一种渐进的特效，也很符合下拉菜单的效果，比使用jQuery动画好看多了，真的非常赞，以前没有发现真是太可惜了。关键代码：

.nav ul{height:0;overflow:hidden;left:0; top:100%;position:absolute;}
.nav li:hover ul{height:auto;width:180px}
.nav li ul li{opacity:0;-webkit-transition:0.5s;transition:0.5s;width:100%;-webkit-transition-delay:0s;transition-delay:0s}
.nav li:hover ul li{opacity:1;-webkit-transition-delay:0.5s;transition-delay:0.5s}
.nav ul li a{background:#7770B4;border-color:#6E67A6;color:#fff;line-height:1px;-webkit-transition:1.5s;transition:1.5s}
.nav li:hover ul li a{line-height:35px}

有点遗憾的是上面这个不支持三级菜单，经过了一番折腾，改为菜单不是以高度为0，而是设置为visibility:hidden;和opacity:0;代码如下：

.nav ul{left:0; position:absolute;top:100%; min-width: 120px; visibility: hidden; opacity: 0;}
.nav li ul li{opacity:0; -webkit-transition:0.5s;transition:0.5s;width:100%;-webkit-transition-delay:0s;transition-delay:0s}
.nav li:hover > ul{opacity: 1; visibility: visible;}
.nav li:hover > ul > li{opacity:1;-webkit-transition-delay:0.5s;transition-delay:0.5s}
.nav ul li a{background:#7770B4;border-color:#6E67A6;color:#fff;line-height:1px;-webkit-transition:1.5s;transition:1.5s; white-space: nowrap;}
.nav li:hover > ul > li a{line-height:35px}
.nav ul ul{left:100%; top:0;}

使用CSS做出来的下拉菜单不兼容IE66(IE6不支持:hover伪类选择符).而IE8及以下则是不支持一些CSS3属性，比如opacity、transition等。总体上来说兼容IE7及以上的所有浏览器，所以如果你需要兼容IE6.可以添加一些js使其支持访问。不过我的建议是你现在应该放弃IE6了。总体上来说第一种效果是比较适合，而且代码简单，兼容性比较好。演示地址
推荐资源 http://cssdeck.com/labs/collection-of-menu-effects http://cssdeck.com/labs/css3-scroll-drop-down-menu