效果：
代码：
html：
<div class="main">
<div id="open">打开</div>
<div class="left"></div>
<div class="mask"></div>
</div>
css：
body,html{
height:100%;
}
.main{
position:relative;
width:100%;
height:100%;
}
.left{
position:absolute;
width:260px;
height:100%;
left:-300px;
background:skyblue;
z-index:1000;
box-shadow:5px 0px 10px rgba(0,0,0,.2);
transition:all 0.3s;
}
.left.left-open{
left:0;
}
.mask{
display:none;
position:absolute;
height:100%;
width:100%;
background:rgba(0,0,0,.5);
z-index:500;
}
#open{
position:absolute;
top:10px;
left:10px;
padding:10px;
background:skyblue;
cursor:pointer;
}
javascript：
var open = document.getElementById("open");
var left = document.querySelector(".left");
var mask = document.querySelector(".mask");
open.onclick = function(){
left.className += " left-open";
mask.style.display = "block";
}
mask.onclick = function(){
left.className += "left";
mask.style.display = "none";
}
