相当逼真,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 >
< 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 ; 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 ; }
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))) ; }
#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