jQuery+CSS3垂直菜单效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3垂直菜单效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html> 
<html> 
<head>
	<title>jQuery+CSS3垂直菜单效果</title> 
	<link href="css/zzsc.css" rel="stylesheet" type="text/css"></link>
	<script type="text/javascript" src="js/jquery-2.0.0.min.js" ></script>
	<script>
	$(document).ready(function() {
		$('ul.form li a').click(
			function(e) {
				e.preventDefault(); // prevent the default action
				e.stopPropagation; // stop the click from bubbling
				$(this).closest('ul').find('.selected').removeClass('selected');
				$(this).parent().addClass('selected');
			});
	});
	</script>	
</head>

<body>
	<h1>Vertical Menu</h1>
	
	<ul class="form">
		<li><a class="profile" href="#"><i class="icon-user"></i>Edit Profile</a></li>
		<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
		<li><a class="settings" href="#"><i class="icon-cog"></i>App Settings</a></li>
		<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
	</ul>
</body>
</html>

CSS代码(zzsc.css):

body{background:url(bg.jpg) scroll center center;margin:0;padding:0;font-family:Quicksand;font-weight:700;}
ul.form{position:relative;background:#fff;width:250px;margin:auto;padding:0;list-style:none;overflow:hidden;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:1px 1px 10px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 10px rgba(0,0,0,0.1);box-shadow:1px 1px 10px rgba(0,0,0,0.1);}
.form li a{width:225px;padding-left:20px;height:50px;line-height:50px;display:block;overflow:hidden;position:relative;text-decoration:none;text-transform:uppercase;font-size:14px;color:#686868;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.form li a:hover{background:#efefef;}
.form li a.profile{border-left:5px solid #008747;}
.form li a.messages{border-left:5px solid #fecf54;}
.form li a.settings{border-left:5px solid #cf2130;}
.form li a.logout{border-left:5px solid #dde2d5;}
.form li:first-child a:hover,.form li:first-child a{-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}
.form li:last-child a:hover,.form li:last-child a{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}
.form li a:hover i{color:#ea4f35;}
.form i{margin-right:15px;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.form em{font-size:10px;background:#ea4f35;padding:3px 5px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;font-style:normal;color:#fff;margin-top:17px;margin-right:15px;line-height:10px;height:10px;float:right;}
.form li.selected a{background:#efefef;}
h1{color:#fff;margin:0 auto;margin-top:120px;margin-bottom:40px;font-size:30px;width:300px;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)