以下是 CSS3二级下拉动画滑动菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3二级下拉动画滑动菜单</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="sidebar">
<h1><i class="fa fa-bars push"></i>Animated <span class="color">Menu</span></h1>
<ul>
<li>
<a href="#"><i class="fa fa-dashboard push"></i>Dashboard<i class="fa fa-angle-right"></i></a><span class="hover"></span>
</li>
<li>
<a href="#"><i class="fa fa-user push"></i>Users<i class="fa fa-angle-right"></i></a><span class="hover"></span>
<ul class="sub-menu">
<li><a href="#">Add User<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
<li><a href="#">Manage Users<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-cog push"></i>Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span>
<ul class="sub-menu">
<li><a href="#">Dashboard Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
<li><a href="#">Profile Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
<li><a href="#">Manage Menu<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
<li><a href="#">User Profiles<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-picture-o push"></i>appearance<i class="fa fa-angle-right"></i></a><span class="hover"></span>
<ul class="sub-menu">
<li>
<a href="#">Change Theme<i class="fa fa-angle-right"></i></a><span class="hover"></span>
</li>
<li><a href="#">Theme Options<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-file push"></i>Information<i class="fa fa-angle-right"></i></a><span class="hover"></span>
<ul class="sub-menu">
<li>
<a href="#">Latest News<i class="fa fa-angle-right"></i></a><span class="hover"></span>
</li>
<li><a href="#">Recent Articles<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-plane push"></i>Contact<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
</ul>
</div>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
JS代码(index.js):
$( "li" ).hover( function(){
$(this).find("a").css("color","#FFF");
$(this).find("span").stop().animate({
width:"100%",opacity:"1",}
,600,function (){
// Animation complete. // Show Navigation}
)}
,function(){
$(this).find("a").css("color","#555");
$(this).find("span").stop().animate({
width:"0%",opacity:"0",}
,600,function (){
// Animation complete. // Show Navigation}
)}
);
CSS代码(style.css):
*{margin:0px;}
html{background:url(http://imd.edumedia.ca/mars0277/code/grey.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
.sidebar{width:250px;height:100%;position:fixed;background:url("http://themes.mediacreed.com/html/synergy/assets/patterns/menu/menu_pattern_1.png");border-right:10px solid #d00355;}
.sidebar ul{margin-top:30px;}
.sidebar li{list-style:none;padding:10px;position:relative;}
.sidebar a{text-decoration:none;color:#555;font:14px Open Sans;text-transform:uppercase;position:relative;z-index:1000;}
.sidebar .hover{display:block;position:absolute;width:0%;height:40px;top:0px;left:0px;background:#d00355;z-index:0;opacity:0;}
.sidebar a:hover{color:#FFF;}
.sidebar .fa-angle-right{position:absolute;left:150px;top:1px;}
.sidebar .sub-menu{position:absolute;left:210px;top:-30px;padding:0px;width:220px;display:none;background:url("http://themes.mediacreed.com/html/synergy/assets/patterns/menu/menu_pattern_1.png");}
.sidebar .sub-menu li a{padding-left:20px;font-size:13px;}
.sidebar .sub-menu i{left:180px;}
.sidebar ul li:hover ul{display:block;}
.sidebar .push{margin-right:10px;}
h1{color:#FFF;font:16px Open Sans;padding-left:50px;padding-top:30px;}
.color{color:#d00355;}
分享到QQ
分享到微博
微信扫一扫
