css教程css3动画下拉菜单

爱斯诺博客-Fireworks制作教程网-专业网页设计教程-网页制作教程网 2012-12-26 904 阅读

css3教程这次教程中给你带来的是一个很酷的CSS3动画效果的下拉菜单，本次效果应用在导航条上，希望各位能够喜欢。

查看演示

还记得之前做过的一个CSS3下拉菜单吗？这次的效果就是在那个基础之上进行了升级调整。如果觉得这个教程看不太懂，还没看过上一个教程的，可以先看看上一个CSS3下拉菜单教程

HTML代码开始

HTML代码跟上一个教程的代码差不多，为了方便观察代码，我们先放入一级下拉菜单，当自己动手制作了以后，可以再添加更多级的菜单。

<ul> <li><a href="http://isnowe.com/css3-animated-dropdown-menu.html">Home</a></li> <li> <a href="http://isnowe.com/css3-animated-dropdown-menu.html">Categories</a> <ul> <li><a href="http://isnowe.com/css3-animated-dropdown-menu.html">CSS</a></li> <li><a href="http://isnowe.com/css3-animated-dropdown-menu.html">Graphic design</a></li> <li><a href="http://isnowe.com/css3-animated-dropdown-menu.html">Development tools</a></li> <li><a href="http://isnowe.com/css3-animated-dropdown-menu.html">Web design</a></li> </ul> </li> <li><a href="http://isnowe.com/css3-animated-dropdown-menu.html">Work</a></li> <li><a href="http://isnowe.com/css3-animated-dropdown-menu.html">About</a></li> <li><a href="http://isnowe.com/css3-animated-dropdown-menu.html">Contact</a></li> </ul> CSS代码开始

首先是基础默认样式

#menu, #menu ul { margin: 0; padding: 0; list-style: none; }

#menu是这个菜单的主框架，这个菜单主要以UL标签作为包裹层，渐变、圆角、投影等效果都在这个标签上实现。

#menu { width: 960px; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: linear-gradient(#444, #111); border-radius: 6px; box-shadow: 0 1px 1px #777; } 清除浮动

这个清除浮动的方法很好用，我一直在使用

#menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom:1; }

列表元素

请注意这个#menu li:hover > a方法，这是CSS中的一个方法，在IE6以上的版本中都可以兼容，其实是一个不错的方法意思是选择li标签的下一级子标签a

#menu li { float: left; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; position: relative; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover { /* IE6 only */ color: #fafafa; }

菜单动画

利用css3独有的样式过渡转变transition，将margin跟opacity的鼠标经过前后变化加上的时间轴出现的效果。

#menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: #444; background: linear-gradient(#444, #111); box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; transition: all .2s ease-in-out; } #menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: linear-gradient(#04acec, #0186ba); }

JQUERY

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('li').has('ul').mouseover(function(){ $(this).children('ul').css('visibility','visible'); }).mouseout(function(){ $(this).children('ul').css('visibility','hidden'); }) } });

查看演示

本文结束希望你会喜欢这个教程，如果有什么不对或者不懂的地方请留言告诉我。

版权所有：爱斯诺博客(isnowe) 《css教程css3动画下拉菜单》
本文链接：
特别声明：除特别标注，本站文章均为原创，遵循CC BY-NC 3.0，转载请注明出处

您可能还喜欢

css教程css3动画下拉菜单，首发于爱斯诺博客-Fireworks制作教程网-专业网页设计教程-网页制作教程网。

作者：爱斯诺博客-Fireworks制作教程网-专业网页设计教程-网页制作教程网

爱斯诺博客,专业网页设计教程,爱斯诺博客为您提供fireworks教程,css教程,html教程,jquery教程,dreamweaver教程,UI设计等网页制作教程,爱斯诺博客会给您带来最优质的fi

原文地址：css教程css3动画下拉菜单, 感谢原作者分享。

→css教程css3加载动画教程 ←css教程css3下拉菜单教程

发表评论

您可能感兴趣的博客