JS侧边栏实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.nav{
width: 100px;height: 300px;border-radius: 0 15px 15px 0;background: #82FCB8;position: absolute; top: 50px;left: -100px;
}
.nav span{display: block; background: orange;width: 30px;height: 90px;border-radius: 0 4px 4px 0;font-size: 20px;line-height: 30px;position: relative;left: 100px;top:100px;}
</style>
</head>
<body>
<div class="nav">
<span>分享到</span>
<ul>
<li>QQ</li>
<li>微信</li>
<li>微博</li>
<li>......</li>
</ul>
</div> </body>
</html>

JS的jQuery代码26 <script>
27 $('.nav').mouseenter(function(){
28 $(this).animate({left:'0px'})
29 })
30 $('.nav').mouseleave(function(){
31 $(this).animate({left:'-100px'})
32 })
33 </script>

侧边栏功能实现图片：