使用css3仿造window7的开始菜单

使用css3仿造window7的开始菜单

相当逼真，css3果然强悍。

友情提示：请勿在IE下浏览。

查看实例：http://www.jankoatwarpspeed.com/examples/windows7menu/

点击下载：http://www.36ria.com/wp-content/plugins/download-monitor/download.php?id=170

来看下原作者的设计草图：

简明创建过程

第一步 ：创建如下菜单结构

< div  id ="startmenu" >
< ul  id ="programs" >
< li >< a  href ="#" >< img  src ="firefox-32.png"  alt =""   /> Mozilla Firefox a> li>
<li><a href="#"><img src="chrome.png" alt="" />Google Chrome a> li>
<li><a href="#"><img src="safari.png" alt="" />Safari a> li>
<li><a href="#"><img src="opera.png" alt="" />Opera a> li>
<li><a href="#"><img src="ie.png" alt="" />Internet Explorer a> li>
<li><a href="#"><img src="rss_32.png" alt="" />RSS Feeds a> li>
<li><a href="#"><img src="twitter_32.png" alt="" />Twitter a> li>
<li><a href="#"><img src="delicious_32.png" alt="" />Delicious a> li>
ul>
<ul id="links">
<li class="icon"><img src="folder.png" alt="" /> li>
<li><a href="#"><span>Documents span> a> li>
<li><a href="#"><span>Pictures span> a> li>
<li><a href="#"><span>Music span> a> li>
<li><a href="#"><span>Computer span> a> li>
<li><a href="#"><span>Network span> a> li>
<li><a href="#"><span>Connect to span> a> li>
ul>
div>

win7的开始菜单有二个部分，左侧程序菜单，右侧系统菜单。

第二步：菜单容器css

#startmenu  {  border : solid 1px #102a3e ;  overflow : visible ;  display : inline-block ;  margin : 60px 0 0 20px ;
                     -moz-border-radius : 5px ; -webkit-border-radius : 5px ;  position : relative ;
box-shadow :  inset 0 0 1px #fff ;  -moz-box-shadow :  inset 0 0 1px #fff ;  -webkit-box-shadow :  inset 0 0 1px #fff ;
background-color : #619bb9 ;
background :  -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)) ;
background :  -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)) ;   }

有几个关注的点,可以留意下：

• -moz-border-radius:5px;-webkit-border-radius:5px;圆角效果，这是css3中应用最广的
• box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;阴影效果
• background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));渐变背景

第三步：菜单左侧部分的css

#programs  {  background : #fff ;  border : solid 1px #365167 ;  margin : 7px 0 7px 7px ;
box-shadow :  0 0 1px #fff ;  -moz-box-shadow :  0 0 1px #fff ;  -webkit-box-shadow :  0 0 1px #fff ;
                    -moz-border-radius : 3px ; -webkit-border-radius : 3px ; }
#programs a  {  border : solid 1px transparent ;  display : block ;  padding : 3px ;  margin : 3px ;
color : #4b4b4b ;  text-decoration : none ;  min-width : 220px ; }
#programs a:hover  { border : solid 1px #7da2ce ;
                     -moz-border-radius : 3px ;  -webkit-border-radius : 3px ;
box-shadow :  inset 0 0 1px #fff ;  -moz-box-shadow :  inset 0 0 1px #fff ;  -webkit-box-shadow :  inset 0 0 1px #fff ;
background-color : #cfe3fd ;
background :  -moz-linear-gradient(top, #dcebfd, #c2dcfd) ;
background :  -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd)) ; }
#programs a img  { border : 0 ;  vertical-align : middle ;  margin : 0 5px 0 0 ; }

这里值得留意的是鼠标经过菜单项的效果设置，也就是#programs a:hover里的样式，这是难点，也是css3的强大之处，依旧是圆角、阴影、渐变背景。

第四步：菜单右侧的CSS部分

#links  { margin : 7px ;  margin-top : -30px ; }
#links li.icon  { text-align : center ; }
#links a  { border : solid 1px transparent ;  display : block ;  margin : 5px 0 ;  position : relative ;
color : #fff ;  text-decoration : none ;  min-width : 120px ; }
#links a:hover  { border : solid 1px #000 ;
                      -moz-border-radius : 3px ;  -webkit-border-radius : 3px ;
 box-shadow :  0 0 1px #fff ;  -moz-box-shadow :  inset 0 0 1px #fff ;  -webkit-box-shadow :  inset 0 0 1px #fff ;
 background-color : #658da0 ;
 background :  -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55)) ;
 background :  -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384)) ;
  }
 #links a span  {  padding : 5px ;  display : block ;   }
 #links a:hover span  {  background :  -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5)) ;
 background :  -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
                                color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))) ;   }

要留意的点依旧是哪几项，难点在于细节的微调，尤其是渐变背景的制作，css3中非常灵活，下次有机会，发篇css3渐变背景的详细教程。
英文原文：http://www.jankoatwarpspeed.com/post/2010/04/06/windows-7-start-menu-css3.aspx