先上图
功能：
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");//侧边栏收起，取消侧边栏总容器的点击效果}
最后，以上涉及的图片等内容来源网络，仅做学习使用，如有侵权请联系作者删除。
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--主体--><div id="content" >********这里放置网页主要内容********</div><!--侧边栏--><div class="sidebarback"><div class="sidebar"><button id="sideopenbutton"><</button><div id="sidebarbox"></div></div></div><script src="/jquery/1.10.2/jquery.min.js"></script><script>//添加属性标记，记录侧边栏状态//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");//侧边栏收起，取消侧边栏总容器的点击效果}</script><style>/*主体*/#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;}</style></body></html>
