css3实现美化菜单设计

最新推荐文章于 2023-04-05 17:37:57 发布

jupeizhong

最新推荐文章于 2023-04-05 17:37:57 发布

阅读量590

点赞数

分类专栏： web 文章标签： css3 css 设计

本文链接：https://blog.csdn.net/jupeizhong/article/details/38665967

版权

web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

许多网站的菜单都有其特色，我也用css3自己设计了一个菜单。时间匆忙只写了兼容webkit核的，不过效果还是比较美观的。下面贴出效果图（右边为选择时的效果）：

代码的主体当然是css样式表，其中要注意css选择器要少用id，可以用nth-child之类的写法代替，以便于代码的重用。代码写起来不复杂，难点是折页效果的实现，我采用的是3d旋转div的方法实现的。

html部分代码：

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

其中夹在li中间的div就是实现折页效果的。

css部分：

			body {background-color: rgb(14, 179, 192);}
			#page
			{
				position: absolute;
				left: 100px;
				width: 1100px;
				height: 600px;
				background-color: #eee;
			}
			#page ul
			{
				margin-left: -80px;
				list-style: none;
				z-index: 0;
			}
			#page ul li
			{
				margin-left: 10px;
				margin-top: 20px;
				width: 200px;
			}
			#page ul li a
			{
				display: block;
				width: 200px;
				color: white;
				opacity: 0.8;
				font-size: 30px;
				text-align: center;
				text-decoration:none; 
				line-height: 60px;
				-webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.5)
			}
			#page ul li div
			{
				position: absolute;
				width: 30px;
				height: 100px;
				-webkit-transform:translate(2px, -8px) rotateX(60deg) rotateY(30deg);
				-webkit-box-shadow:none;
			}
			#page ul li a:hover
			{
				-webkit-box-shadow:15px 15px 25px rgba(0, 0, 0, 0.5);
				font-size: 40px;
			}
			#page ul li a:active
			{
				-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
			}
			#page ul li:nth-child(1)
			{
				background-color: rgb(226,130,105);
			}
			#page ul li:nth-child(2)
			{
				background-color: rgb(228,222,103);
			}
			#page ul li:nth-child(3)
			{
				background-color: rgb(103,228,103);
			}
			#page ul li:nth-child(4)
			{
				background-color: rgb(103,228,219);
			}
			#page ul li:nth-child(5)
			{
				background-color: rgb(103,109,228);
			}
			#page ul li:nth-child(6)
			{
				background-color: rgb(228,103,228);
			}
			#page ul li:nth-child(1) div
			{
				background-color: rgb(226,130,105);
			}
			#page ul li:nth-child(2) div
			{
				background-color: rgb(228,222,103);
			}
			#page ul li:nth-child(3) div
			{
				background-color: rgb(103,228,103);
			}
			#page ul li:nth-child(4) div
			{
				background-color: rgb(103,228,219);
			}
			#page ul li:nth-child(5) div
			{
				background-color: rgb(103,109,228);
			}
			#page ul li:nth-child(6) div
			{
				background-color: rgb(228,103,228);
			}

整体代码：

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {background-color: rgb(14, 179, 192);}
			#page
			{
				position: absolute;
				left: 100px;
				width: 1100px;
				height: 600px;
				background-color: #eee;
			}
			#page ul
			{
				margin-left: -80px;
				list-style: none;
				z-index: 0;
			}
			#page ul li
			{
				margin-left: 10px;
				margin-top: 20px;
				width: 200px;
			}
			#page ul li a
			{
				display: block;
				width: 200px;
				color: white;
				opacity: 0.8;
				font-size: 30px;
				text-align: center;
				text-decoration:none; 
				line-height: 60px;
				-webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.5)
			}
			#page ul li div
			{
				position: absolute;
				width: 30px;
				height: 100px;
				-webkit-transform:translate(2px, -8px) rotateX(60deg) rotateY(30deg);
				-webkit-box-shadow:none;
			}
			#page ul li a:hover
			{
				-webkit-box-shadow:15px 15px 25px rgba(0, 0, 0, 0.5);
				font-size: 40px;
			}
			#page ul li a:active
			{
				-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
			}
			#page ul li:nth-child(1)
			{
				background-color: rgb(226,130,105);
			}
			#page ul li:nth-child(2)
			{
				background-color: rgb(228,222,103);
			}
			#page ul li:nth-child(3)
			{
				background-color: rgb(103,228,103);
			}
			#page ul li:nth-child(4)
			{
				background-color: rgb(103,228,219);
			}
			#page ul li:nth-child(5)
			{
				background-color: rgb(103,109,228);
			}
			#page ul li:nth-child(6)
			{
				background-color: rgb(228,103,228);
			}
			#page ul li:nth-child(1) div
			{
				background-color: rgb(226,130,105);
			}
			#page ul li:nth-child(2) div
			{
				background-color: rgb(228,222,103);
			}
			#page ul li:nth-child(3) div
			{
				background-color: rgb(103,228,103);
			}
			#page ul li:nth-child(4) div
			{
				background-color: rgb(103,228,219);
			}
			#page ul li:nth-child(5) div
			{
				background-color: rgb(103,109,228);
			}
			#page ul li:nth-child(6) div
			{
				background-color: rgb(228,103,228);
			}
		</style>
	</head>
	<body>
		<div id = "page">
			<ul>
				<li><div></div><a href = "javascript:void(0);">菜单 1</a></li>
				<li><div></div><a href = "javascript:void(0);">菜单 2</a></li>
				<li><div></div><a href = "javascript:void(0);">菜单 3</a></li>
				<li><div></div><a href = "javascript:void(0);">菜单 4</a></li>
				<li><div></div><a href = "javascript:void(0);">菜单 5</a></li>
				<li><div></div><a href = "javascript:void(0);">菜单 6</a></li>
			</ul>
		</div>
	</body>
</html>