超赞的CSS3动画下拉菜单

今天分享几个最近看到的比较实用的css3带动画的下拉菜单效果,实现出来的效果跟使用jQuery的slideDown和fadeIn有得一比,效果非常赞,本人推荐各位以后可以使用下面的几种效果,一定会给你的前端开发带来不少亮点的。如果需要更多效果可以看之前的文章:CSS3下拉菜单模板

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也可以让菜单动起来了。

演示地址

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

原创文章:超赞的CSS3动画下拉菜单 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css3-menu.html)

发表评论

请登录后发表评论:

“超赞的CSS3动画下拉菜单”有3个评论

  1. 变节的子弹

    逐渐下推出来 可以在基础上让每个li的高从0 变 多 这样更方便哦

    登录回复
  2. 中华高铁族

    神州追梦起风尘,高铁铿锵滚火轮。纵横十万长缨带,同牵锦绣步新春。

    登录回复
    • 刘振兴

      不错,继续努力!

      登录回复