用css3仿造window7的开始菜单

简明创建过程

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

<divid="startmenu">
<ulid="programs">
<li><ahref="#"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>a>li>
<li><ahref="#"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>a>li>
<li><ahref="#"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>a>li>
<li><ahref="#"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>a>li>
<li><ahref="#"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>a>li>
<li><ahref="#"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>a>li>
<li><ahref="#"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>a>li>
<li><ahref="#"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>a>li>
ul>
<ulid="links">
<liclass="icon"><imgsrc=http://www.shancun.net/skin/default/image/nopic.gif>li>
<li><ahref="#"><span>documentsspan>a>li>
<li><ahref="#"><span>Picturesspan>a>li>
<li><ahref="#"><span>Musicspan>a>li>
<li><ahref="#"><span>Computerspan>a>li>
<li><ahref="#"><span>Networkspan>a>li>
<li><ahref="#"><span>Connecttospan>a>li>
ul>
div>

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

第二步：菜单容器css

#startmenu{border:solid1px#102a3e;overflow:visible;display:inline-block;margin:60px0020px;
-moz-border-radius:5px;-webkit-border-radius:5px;position:relative;
box-shadow:inset001px#fff;-moz-box-shadow:inset001px#fff;-webkit-box-shadow:inset001px#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,centertop,centerbottom,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:solid1px#365167;margin:7px07px7px;
box-shadow:001px#fff;-moz-box-shadow:001px#fff;-webkit-box-shadow:001px#fff;
-moz-border-radius:3px;-webkit-border-radius:3px;}
#programsa{border:solid1pxtransparent;display:block;padding:3px;margin:3px;
color:#4b4b4b;text-decoration:none;min-width:220px;}
#programsa:hover{border:solid1px#7da2ce;
-moz-border-radius:3px;-webkit-border-radius:3px;
box-shadow:inset001px#fff;-moz-box-shadow:inset001px#fff;-webkit-box-shadow:inset001px#fff;
background-color:#cfe3fd;
background:-moz-linear-gradient(top,#dcebfd,#c2dcfd);
background:-webkit-gradient(linear,centertop,centerbottom,from(#dcebfd),to(#c2dcfd));}
#programsaimg{border:0;vertical-align:middle;margin:05px00;}

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

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

#links{margin:7px;margin-top:-30px;}
#linksli.icon{text-align:center;}
#linksa{border:solid1pxtransparent;display:block;margin:5px0;position:relative;
color:#fff;text-decoration:none;min-width:120px;}
#linksa:hover{border:solid1px#000;
-moz-border-radius:3px;-webkit-border-radius:3px;
box-shadow:001px#fff;-moz-box-shadow:inset001px#fff;-webkit-box-shadow:inset001px#fff;
background-color:#658da0;
background:-moz-linear-gradient(centerleft,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));
}
#linksaspan{padding:5px;display:block;}
#linksa:hoverspan{background:-moz-linear-gradient(centertop,transparent,transparent49%,rgba(2,37,58,0.5)50%,rgba(63,111,135,0.5));
background:-webkit-gradient(linear,centertop,centerbottom,from(transparent),color-stop(49%,transparent),
color-stop(50%,rgba(2,37,58,0.5)),to(rgba(63,111,135,0.5)));}

要留意的点依旧是哪几项，难点在于细节的微调，尤其是渐变背景的制作，css3中非常灵活，下次有机会，发篇css3渐变背景的详细教程。