原文链接 ： http://www.jq22.com/webqd2985
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一看就会的 侧拉菜单栏-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
body {
margin:0;
background:rgb(120,194,196);
}
ul {
display:inline-block;
list-style:none;
width:100%;
}
li {
padding:10px;
}
ul a {
text-decoration:none;
color:rgb(255,255,255);
font-size:16px;
font-weight:700;
display:inline-block;
width:100%;
}
ul a:hover {
background:rgb(189,192,186);
}
.btn-on,.btn-out {
border:none;
background:rgb(110,117,164);
width:200px;
height:100px;
color:rgb(255,255,255);
font-size:16px;
font-weight:700;
position:absolute;
right:10px;
top:10px;
}
.btn-out {
display:none;
background:rgb(0,137,167);
}
.click-bar {
background:rgb(110,117,164);
width:400px;
position:fixed;
top:130px;
right:-400px;
}
</style>
</head>
<body>
<button class="btn-on">一键点击侧拉菜单</button>
<button class="btn-out">一键关闭侧拉菜单</button>
<div class="click-bar">
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
</ul>
</div>
<script>
var clickbar = $('.click-bar'),
buttonOn = $('.btn-on'),
buttonOut = $('.btn-out');
function showClickbar() {
clickbar.animate({
'right': 0
});
buttonOn.fadeOut();
buttonOut.fadeIn();
}
function hideClickbar() {
clickbar.animate({
'right': -clickbar.width()
});
buttonOut.fadeOut();
buttonOn.fadeIn();
}
buttonOn.on('click', showClickbar)
buttonOut.on('click', hideClickbar)
</script>
</body>
</html>