使用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

原文链接：http://www.36ria.com/2368

转载于:https://www.cnblogs.com/csn0721/archive/2010/06/04/1751507.html