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

杰拉斯 | 时间：2012-05-29, Tue | 27,048 views
前端开发　

昨天在做一个网站的左栏菜单的时候，突然想到，看了那么多创意的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

如需转载请注明出处：杰拉斯的博客

杰拉斯的博客