超赞的CSS3动画下拉菜单

时间:2020-6-27 作者:admin

今天分享几个最近看到的比较实用的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下拉菜单模板下载

    HTML5 和 css3 目前是属于比较流行的趋势,所以,有研空或者做前端的同学可以下载下来看下,今天收集分享:48个免费的HTML5和CSS3下拉菜单模板下载,希望其中有你喜欢和需要的,或者可以给你带来灵感的。 Dark Menu: Pu …

  • css3动画属性animation

    在前面已经学习过了css3中的transition(css3动画属性)、transform(css3变形属性)。今天来学习另外一个css3动画属性animation,这个是不是跟我们jQuery中的animate很相似呢? 我们也知道tra …

  • 超酷的CSS3幻灯片效果

    对于css3的喜爱可谓日渐增加,无奈自己很忙,没有多少时间来研究,这段时间也做了很多这方面的项目,比如类似于QQ 的IM沟通工具界面,比如新的博客界面,比如这个css 幻灯片演示(拿来的)。 如果让我来做这个幻灯片的效果,我想可能跟这个不太 …

  • 纯CSS3制作TAB选项卡的两种方式

    css tab,纯CSS3制作tab,不用JavaScript就可以制作选项卡是不是很神奇,而且效果跟不适用jQuery是一个样的,本站独创的CSS3 Tab绝对让你眼前一亮。

  • CSS3动画效果,CSS3动画库推荐

    今天介绍的是国外的CSS3 Animation Cheat Sheet、Animate.css、magic css3 animation,初次看到几个动画效果,感觉很酷,看了一下代码,才发现原来就是这么简单的,就是使用了transform和 …

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:87074139@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。