摘要：<!DOCTYPE html> <html> <head> <title>左侧导航</title> <meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<title>左侧导航</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="static\css\css.css">
<link rel="stylesheet" type="text/css" href="static\font-awesome-4.7.0\css\font-awesome.min.css">
<script type="text/javascript" src="static\jquery-3.3.1.js"></script>
</head>
<body>
<div class="content">
<div class="meun_left">
<ul>
<li><a href="#"><i class="fa fa-address-book"></i></a></li>
<li style="background-color: #00FF00;"><a href="#"><i class="fa fa-bitbucket"></i></a></li>
<li style="background-color: #C0C0C0;"><a href="#"><i class="fa fa-bathtub (alias)"></i></a></li>
<li style="background-color: #FF0000;"><a href="#"><i class="fa fa-calendar-minus-o"></i></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
$('li').hover(function(){
$(this).stop().animate({width:100},500);
},function(){
$(this).stop().animate({width:40},500);
})
})
</script>
</body>
</html>*{margin: 0px;padding: 0px;}
ul{list-style: none;}
.meun_left{margin-top: 100px;position: fixed;}
ul a{text-decoration: none; color: #fff;font-weight: 700;font-size: 20px;}
ul li{width: 40px;height: 100px;background-color: green;margin-top: 20px;text-align: center;line-height: 100px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
ul li:hover{background-color: #ccc;}
ul li:hover i{color: #202020;}
.content{height: 2000px;}通过简单的html和css作出jQuery左侧划出导航的样式，再用jQuey选择器选择需要动画效果的元素，利用hover事件生产animate动画效果
批改老师：韦小宝批改时间：2018-12-11 16:29:57
老师总结：写的很不错！这种案例很能提高技术的！课后多写点这种类似的案例是有很大好处的！
