先上图
功能：
1、点击按钮弹出侧边栏，点击按钮关闭侧边栏；
2、侧边栏弹出时，其他部分变暗，点击变暗区域也可以收起侧边栏
首先
我这里采用两个div叠加作为基础框架。底层div显示内容，上方div显示侧边栏，因此需要将body固定一下，在body放置两个div。
css
html,body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body{
position: relative;
overflow: hidden;
}
HTML
看一下大致结构
<body>
<!--主体-->
<div id="content" >
********
这里放置网页主要内容
********
</div>
<!--侧边栏-->
<div class="sidebarback">
<div class="sidebar">
<button id="sideopenbutton"><</button>
<div id="sidebarbox">
</div>
</div>
</div>
</body>
CSS
这里开始正式的侧边栏样式。
/*主体*/
#content{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow-y:auto;
overflow-x: hidden;
}
/*侧边栏总容器*/
.sidebarback{
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
pointer-events: none;/*设置不产生点击事件，穿透到下层*/
overflow: hidden;
background: none;
transition: all 0.3s linear;
}
/*侧边栏+按钮*/
.sidebar{
position: relative;
float: right;
width: 320px;/*侧边栏+按钮宽度*/
right: -300px;/*侧边栏隐藏在屏外宽度*/
height: 100%;
transition: all 0.3s ease-out;
}
/*按钮*//*就是个普通按钮，这里属性不重要，自行设置即可，只要定好垂直居中的位置*/
#sideopenbutton{
position:absolute;
width: 20px;
height: 40px;
top: 50%;
margin-top: -20px;
pointer-events: visible;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border-style: none;
outline: none;
float: left;
background: black;
color: white;
padding-top: 4px;
transition: all 0.3s linear;
font-size: 20px;
font-weight: bold;
}
/*侧边栏*//*这个是真正的侧边栏，放内容的主体框*/
#sidebarbox{
width: 300px;
height: 100%;
float: right;
background: white;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
}
/*这里用于js调用，侧边栏弹出时，其余背景要变成半黑透明，突显侧边栏*/
.sideback-open{
background: rgba(0,0,0,0.6);
}
/*这里用于js调用，侧边栏开关动画*/
.sidebar-open{
right: 0;
}
JS
处理点击事件
//添加属性标记，记录侧边栏状态//0收起，1展开
$("#sideopenbutton").attr("open1",0);
$("#sideopenbutton").click(function (e){
e.stopPropagation();//阻止点击操作传到父元素上
if($("#sideopenbutton").attr("open1")==0){
open(); //打开
}else{
close();//关闭
}
});
//-------------------------------------------------------------------------
//.sidebarback为侧边栏总容器，.sidebar为侧边栏
//侧边栏弹出时，界面=侧边栏总容器=半黑透明背景+侧边栏
// 设置单击侧边栏总容器关闭侧边栏+阻止侧边栏处的单击事件穿透（单击事件传不到侧边栏总容器）=只有单击半黑透明背景才能关闭侧边栏
$(".sidebarback").click(function () {
close();
});
$(".sidebar").click(function () {
event.stopPropagation();
});
//-------------------------------------------------------------------------
//打开侧边栏
function open() {
$("#sideopenbutton").attr("open1",1);//0收起，1展开
$("#sideopenbutton").html(">");//0收起，1展开
$(".sidebar").toggleClass("sidebar-open");//切换css样式
$(".sidebarback").toggleClass("sideback-open");
$(".sidebarback").css("pointer-events","auto");//启动侧边栏总容器的点击事件，用于背景点击可关闭功能
}
//关闭侧边栏
function close(){
$("#sideopenbutton").attr("open1",0);//0收起，1展开
$("#sideopenbutton").html("<");//0收起，1展开
$(".sidebar").toggleClass("sidebar-open");
$(".sidebarback").toggleClass("sideback-open");
$(".sidebarback").css("pointer-events","none");//侧边栏收起，取消侧边栏总容器的点击效果
}
最后，以上涉及的图片等内容来源网络，仅做学习使用，如有侵权请联系作者删除。
![门户通专访草根站长九天狼：做站贵在坚持[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)