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