漂亮的纯css3定义的导航菜单 Nice Pure CSS3 Slick Menu
作者:网络 来源:佚名 更新时间:2011-01-10 15:53:17 点击:漂亮的纯css3定义的导航菜单 Nice Pure CSS3 Slick Menu,firefox3.6运行正常,ie6不支持css3,谨慎使用
In this article we are trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).
Note: This is an experimental example using the new features of CSS3. The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.
Lets create the html used.
<div class="wrapper"> <div class="container"><ul class="menu" rel="sam1"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li ><a href="#">Blog</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Twitter @insic</a></li> </ul> </div> </div>
Now the CSS.
Lets add a gradients using CSS3 gradient
property into our wrapper div
.
.wrapper { width: 100%; height: 80px; background : #464646; background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); border-top: 2px solid #939393; position: relative; margin-bottom: 30px; }
The CSS code for the menu item.
ul { margin: 0; padding: 0; } ul.menu { height: 80px; border-left: 1px solid rgba(0,0,0,0.3); border-right: 1px solid rgba(255,255,255,0.3); float:left; } ul.menu li { list-style: none; float:left; height: 79px; text-align: center; background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) ); background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); } ul li a { display: block; padding: 0 20px; border-left: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(0,0,0,0.1); text-align: center; line-height: 79px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); -webkit-transition-property: background; -webkit-transition-duration: 700ms; -moz-transition-property: background; -moz-transition-duration: 700ms; } ul li a:hover { background: transparent none; } ul li.active a{ background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) ); background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); }