效果：

代碼：

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";
}