CSS3 技术实现的菜单


CSS3 技术实现的菜单，用CSS3就能实现网页上的动画效果，就像本款CSS3菜单一样，当你把鼠标移上去的时候，菜单的底部会出现一条线，带点动画效果，比起使用JavaScript或jQuery来说，代码更简洁，不过遗憾的是，貌似现在主流的IE8并不支持CSS3。

答案：<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 技术实现的菜单</title>
<style type="text/css">
body{
	 background:#202020;
	 font:bold 12px Arial, Helvetica, sans-serif;
	 margin:0;
	 padding:0;
	 min-width:960px;
	 color:#bbbbbb; 
}
a { 
	text-decoration:none; 
	color:#fff;
}
h1 {
	font: 4em normal Arial, Helvetica, sans-serif;
	padding: 20px;	margin: 0;
	text-align:center;
}
h1 small{
	font: 0.2em normal  Arial, Helvetica, sans-serif;
	text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
	display: block;
}
header { 
		padding:0 40px; 
		margin:0 auto; 
		position:relative; 
		width:915px; 
		height:145px;
}
header nav ul{ 
	list-style:none;
	padding-top:50px;
}
header nav li {
	position:relative;
	float: left;
	width:150px;
	text-align:center;
	padding-top:35px;
	padding-bottom:35px;
	color:#fff;
	margin-right:20px;
	border-radius:5px;
	background:#161616;
	border-bottom:1px solid #333;
	border-left:1px solid #000;
	border-right:1px solid #333;
	border-top:1px solid #000;
	cursor:pointer;
}
li:after, li:before {
	-moz-transition:width 0.5s ease 0s;
	height: 0px;
    width: 0px;
    position: absolute;
    content: ' ';
    display: block;
    opacity:0;
	box-shadow: 0px 0px 5px #00c6ff;
}
li:after {
	background: -moz-linear-gradient(left, #0ad, #08b);
    top: 84px;
	left: 75px;
}
li:before {
	background: -moz-linear-gradient(right, #0ad, #08b);
    top: 84px;
	right:75px;
}
li:hover:after,li:hover:before{
    width: 72px;
	height: 1px;
    opacity:1;
} 
</style>
</head>
<body>
<header>
<nav>
	<ul>
    <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>
</header>
</body>
</html>

上一个：简洁大方的二级下拉菜单
下一个：jQuery自定义右键菜单，树状菜单

更多图片编程知识: