js+css特效菜单栏 -

赵雅智

浏览: 98003 次
性别:
来自: 北京

最近访客更多访客>>

qiaoer357

th645231

tuodfh

孟孟孟

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js+css特效菜单栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 
	This technique is originally authored by Elliott Rothman, elliottrothman.com
	Feel free to use, improve, build upon it in any way you can, there is no copyright or anything.
	Similiar terms to the CC Share alike agreement.
	Enjoy this experiment with the webkit proposed CSS3 properties!
-->
<html>
	<head>
		<title>CSS3 Smoothie Slider Menu | Elliott Rothman</title>
		<style type="text/css" media="screen">
			
			/* clear styles */
			* { margin:0; padding:0 }
			:link,:visited { text-decoration:none }
			a img,:link img,:visited img { border:none }
			ul,ol,dl { list-style:none }
			h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
			
			/* basic fonts, colors */
			
			body
			{
				font-family: Helvetica, Arial, Geneva;
				font-size: 11px;
			}
			
			h1
			{
				font-size: 13px;
			}
			
			#wrapper
			{
				
			}
			
			ul.smoothie
			{
				margin-bottom: 20px;
			}
			
			ul.smoothie li
			{
				-webkit-transition-property: margin-left;
				-webkit-transition-duration: 500ms;
				width: 200px;
				border-top:2px solid #efefef;
				display: block;
				margin-left:0;
			}
			
			ul.smoothie li:hover
			{
				margin-left: 10px;
			}
			
			ul.smoothie li a
			{
				-webkit-transition-property: color, background-color, padding-left, -webkit-box-shadow;
				-webkit-transition-duration: 500ms, 500ms, 500ms, 500ms;
				background-color: #fff;
				color: #afafaf;
				padding-left: 0;
				padding-top: 10px;
				padding-bottom: 10px;
				-webkit-box-shadow: 0 0 0 rgba(0,0,0,0)
			
			}
			
			ul.smoothie li a:link
			{
				
			}
			
			ul.smoothie li a:link, ul.smoothie li a
			{
				display:block;
				
				 
			}
			
			ul.smoothie li a:hover
			{
				
				background-color: #efefef;
				color: #333;
				padding-left: 15px;
				-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
				z-smoothie: 2;
				
			}

		</style>
	</head>
	<body>
	<div id="wrapper"></div>
		<h1>CSS3 Smoothie Slider Menu</h1><br/>
		<ul class="smoothie">
			<li><a href="#">Lorem</a></li>
			<li><a href="#">Ipsum</a></li>
			<li><a href="#">Dolor</a></li>
		</ul>
		<br/>
	</div>
	</body>
</html>