CSS3无图片实现华丽折页菜单效果（多浏览器兼容）

昨天在做一个网站的左栏菜单的时候，突然想到，看了那么多创意的CSS3导航、菜单，何不自己动手做一个纯CSS3菜单呢？于是捣鼓了一下把想法给实现了，虽然说是比较老掉牙的一个创意，不过顺便也算是锻炼了一下CSS水平。

先看看网页里的最终效果：

那么，教程开始了！

Step1

首先，一个菜单的结构如下：

<div class="wrapper"> <ul id="menu"> <li><a href="javascript:void(0);">菜单1</a></li> <li><a href="javascript:void(0);">菜单2</a></li> <li><a href="javascript:void(0);">菜单3</a></li> <li><a href="javascript:void(0);">菜单4</a></li> <li><a href="javascript:void(0);">菜单5</a></li> </ul> </div>

当然，未经过CSS美化的效果相当之差，我们来开始加工——

Step2

加上该加上的，去掉该去掉的。该上色的上色，该加宽度的加宽度，该重置的重置（css reset）。

• body颜色：#ddd
• wrapper颜色：#eee
• menu颜色：#0764a1
• 链接颜色：#cde0ec

虽然颜色也有了形状也有了但仍很是单调，因此——

Step3

加上光影圆角细节：

• 菜单左上圆角：10px
• 菜单右下圆角：10px
• 菜单左边框颜色：#0982bd
• 菜单上边框颜色：#0982bd
• 菜单下边框颜色：#054685
• 菜单阴影：3px 5px 5px rgba(0,0,0,0.5)
• wrapper阴影：0 0 10px #222222

虽然菜单已经成型了，但怎么说都谈不上“创意”二字，作为一个追求完美的前端发烧友，自然不能止步于此——

Step4

通过margin负值来实现菜单与wrapper错开：

• menu左端外边距：-20px

但似乎还是少了点什么？没错，就是小小的三角形折页——

Step5

如何用DIV+CSS实现三角形呢？可以利用border来实现，具体原理可参见张鑫旭的《CSS border三角、圆角图形生成技术简介》一文。

• 翻折三角形颜色：#054685
• 边框大小：12px 20px
• 左端外边距：-40px（利用右边框实现多浏览器兼容三角形，因此整个DIV都应该在wrapper外，即为上面20px的两倍）
• 顶端外边距：-12px（与上面边框大小中12px对应）

整个折页菜单的效果就出来了，但为了用户体验，还应该给菜单加上交互效果——

Step6

为菜单的鼠标经过及按下加上交互效果：

• 鼠标经过菜单颜色：#05528f
• 鼠标经过菜单上边框颜色：#066fae
• 鼠标经过菜单下边框颜色：#033772
• 鼠标按下菜单颜色：#033f7e
• 鼠标按下菜单上边框颜色：#045ca0
• 鼠标按下菜单下边框颜色：#02275f

这里还为菜单加大了左端内边距，当然你也可以加上其它CSS3效果：

如图是加上左端外边距和放大1.05倍的效果。

Finally

最后当然是给出代码和Demo了：

CSS部分：

body{ margin:0; background:#ddd; } .wrapper{ width:960px; height:800px; margin:0 auto; position:relative; background:#eee; -moz-box-shadow:0 0 10px #222222; -khtml-box-shadow:0 0 10px #222222; -webkit-box-shadow:0 0 10px #222222; box-shadow:0 0 10px #222222; } #menu{ margin: 0; padding:0; list-style:none; margin-top:150px; margin-left:-20px; display:inline-block; position:relative; z-index:100; } #menu a{ *zoom:1; width:120px; display:block; font-size:14px; color: #cde0ec; line-height:45px; padding-left:40px; background:#0764a1; text-decoration:none; border-left:1px solid #0982bd; border-top:1px solid #0982bd; border-bottom:1px solid #054685; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -moz-box-shadow:3px 5px 5px rgba(0,0,0,0.5); -khtml-box-shadow:3px 5px 5px rgba(0,0,0,0.5); -webkit-box-shadow:3px 5px 5px rgba(0,0,0,0.5); box-shadow:3px 5px 5px rgba(0,0,0,0.5); } #menu li:first-child a{ border-top-right-radius:10px; } #menu li:last-child a{ border-bottom-right-radius:10px; } #menu a:hover{ padding-left:55px; padding-left:40px\0; *padding-left:40px; background:#05528f; border-top:1px solid #066fae; border-bottom:1px solid #033772; -webkit-transform-origin:0; -moz-transform-origin:0; -o-transform-origin:0; -moz-box-shadow:0 5px 5px rgba(0,0,0,0.5); -khtml-box-shadow:0 5px 5px rgba(0,0,0,0.5); -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5); box-shadow:5px 5px 5px rgba(0,0,0,0.5); } #menu a:active{ background:#033f7e; border-top:1px solid #045ca0; border-bottom:1px solid #02275f; } .triangle{ width:0; height:0; position:relative; margin-top:-12px; _margin-top:-30px; margin-left:-40px; border-color:transparent #054685 transparent transparent; border-style:dashed solid dashed dashed; border-width:12px 20px; }

HTML部分：

<div class="wrapper"> <ul id="menu"> <li><a href="javascript:void(0);">菜单1</a></li> <li><a href="javascript:void(0);">菜单2</a></li> <li><a href="javascript:void(0);">菜单3</a></li> <li><a href="javascript:void(0);">菜单4</a></li> <li><a href="javascript:void(0);">菜单5</a></li> </ul> <div class="triangle"></div> </div>

大家最喜爱的Demo

=======================签 名 档=======================
原文地址（我的博客）：http://lanfei.sinaapp.com/2012/05/1255.html
欢迎访问交流，至于我为什么要多弄一个博客，因为我热爱前端，热爱网页，我更希望有一个更加自由、真正属于我自己的小站，或许并不是那么有名气，但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================