CSS实现的菜单效果代码,Css代码库,德仔网

代码语言

代码分类

【Css】 CSS实现的菜单效果

作者:Dezai.CN / 发布于2013/4/18/ 603

这是一个纯CSS实现的菜单效果，只有一级导航菜单，水平显示，鼠标滑过菜单项菜单突出显示，并代码有变换特效，简单实用


	<!DOCTYPE html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS实现的水平动态导航菜单效果</title>
	<style type="text/css">
	 body {
	 padding: 0;
	 margin: 0;
	 background: #D3D4C0;
	 font-size: 14px;
	 font-family: Arial, sans-serif;
	 text-align: center;
	 }
	 img{border:none}
	 #wrap {
	 width: 970px;
	 margin-left: auto;
	 margin-right: auto;
	 }
	 /* Menu Start Here */
	
	 #menu li {
	 display: inline;
	 list-style: none;
	 padding: 0;
	 }
	
	 #menu li a {
	
	 border: 1px solid white;
	 padding: 15px 20px 15px 20px;
	 text-decoration: none;
	 color:black;
	 margin-left: -5px;
	 /* This is the background used for the animation */
	 background-image: url('/jscss/demoimg/201210/image.jpg');
	 /* Align the image position to the left of the a */
	 background-position: left;
	 -webkit-transition: all 0.8s ease-in-out;
	 /* Animation with transition in Firefox (No supported Yet) */
	 -moz-transition: all 0.8s ease-in-out;
	 /* Animation with transition in Opera (No supported Yet)*/
	 -o-transition: all 0.8s ease-in-out;
	 }
	
	 #menu li a:hover {
	 color: white;
	 /* Align the image position of the background to the right*/
	 background-position:right;
	 }
	
	 </style>
	 </head>
	 <body>
	 <div id="wrap">
	 <h1>CSS Menu Demo </h1>
	 <ul id="menu">
	 <li> <a href="#">Home</a> </li>
	 <li> <a href="#">Products</a> </li>
	 <li> <a href="#">Services</a> </li>
	 <li> <a href="#">About</a> </li>
	 <li> <a href="#">Contact</a> </li>
	 </ul>
	 </div>
	</body>
	</html>

试试其它关键字

　菜单效果　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)