当前位置：首页 > 网页特效 > 导航菜单 >

纯CSS3实现的jQuery风格的动感菜单效果

时间：2013-04-01 22:12 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的jQuery风格的动感菜单效果</title>
<style type="text/css">
* { margin:0;
	padding:0;
}

html {height: 100%;}

body{
	position: relative;
	height: 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}
.navbox {
	position: relative;
	float: left;
}
ul.nav {
	list-style: none;
	display: block;
	width: 200px;
	position: relative;
	top: 100px;
	left: 100px;
	padding: 60px 0 60px 0;
	background: url(images/shad2.png) no-repeat;
	-webkit-background-size: 50% 100%;
}
li {
	margin: 5px 0 0 0;
}
ul.nav li a {
	-webkit-transition: all 0.3s ease-out;
	background: #cbcbcb url(images/border.png) no-repeat;
	color: #174867;
	padding: 7px 15px 7px 15px;
	-webkit-border-top-right-radius: 10px;
 	-webkit-border-bottom-right-radius: 10px;
	width: 100px;
	display: block;
	text-decoration: none;
	-webkit-box-shadow: 2px 2px 4px #888;
}
ul.nav li a:hover {
	background: #ebebeb url(images/border.png) no-repeat;
	color: #67a5cd;
	padding: 7px 15px 7px 30px;
}

</style>
</head>
<body>
<div class="navbox">
<ul class="nav">
<li><a href="">XHTML</a></li>
<li><a href="">C++</a></li>
<li><a href="">Mootools</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">CSS</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Ajax</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Perl</a></li>
</ul>
</div>
<div class="navbox">
<ul class="nav">
<li><a href="">XHTML</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">CSS</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Ajax</a></li>
<li><a href="">PHP</a></li>
</ul>
</div>
<div class="navbox">
<ul class="nav">
<li><a href="">XHTML</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">CSS</a></li>
</ul>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

纯CSS3实现的jQuery风格的动感菜单效果，鼠标放上去有轻微的动画效果。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/1032.html

网页特效

纯CSS3实现的jQuery风格的动感菜单效果

导航菜单下载排行

最新文章