CSS3二级下拉动画滑动菜单滑动滚动特效代码

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

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

以下是 CSS3二级下拉动画滑动菜单滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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;}

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