操作方法
新建html文档。
书写hmtl代码。 <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>11111111111<i class="fa fa-angle-right"></i></a><span class="hover"></span> </li> <li><a href="#"><i class="fa fa-user push"></i>2222222222<i class="fa fa-angle-right"></i></a><span class="hover"></span> <ul class="sub-menu"> <li><a href="#">33333<i class="fa fa-angle-right"></i></a><span class="hover"></span></li> <li><a href="#">44444<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>5555555<i class="fa fa-angle-right"></i></a><span class="hover"></span> <ul class="sub-menu"> <li><a href="#">66666<i class="fa fa-angle-right"></i></a><span class="hover"></span></li> <li><a href="#">77777<i class="fa fa-angle-right"></i></a><span class="hover"></span></li> <li><a href="#">8888u<i class="fa fa-angle-right"></i></a><span class="hover"></span></li> <li><a href="#">99999<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>11111<i class="fa fa-angle-right"></i></a><span class="hover"></span> <ul class="sub-menu"> <li><a href="#">2222<i class="fa fa-angle-right"></i></a><span class="hover"></span> </li> <li><a href="#">3333<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>44444<i class="fa fa-angle-right"></i></a><span class="hover"></span> <ul class="sub-menu"> <li><a href="#">5555<i class="fa fa-angle-right"></i></a><span class="hover"></span> </li> <li><a href="#">6666<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>
书写css代码。 * { margin: 0px; } html { background: url(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("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("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; }
书写并添加js代码。 <script src='js/jquery.js'></script> <script> $( "li" ).hover( function() { $(this).find("a").css("color","#FFF"); $(this).find("span").stop().aimate({ width:"100%", opacity:"1", }, 600, function () { }) }, function() { $(this).find("a").css("color","#555"); $(this).find("span").stop().animate({ width:"0%", opacity:"0", }, 600, function () { }) } );</script>
代码整体结构。
查看效果。