js/css全屏侧边栏

在浏览网站时我们经常会看到一个菜单按钮，点一下就会出现一栏侧边导航栏，直接上代码！
HTML部分

<div id="mySidenav" class="sidenav">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  </div>
  <h2>全屏幕侧边栏</h2>
  <p>点击以下菜单图标打开侧边栏</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 打开</span>

css部分

body {
  font-family: "Lato", sans-serif;
  }
  .sidenav {
  height: 100%;width: 0;position: fixed;z-index: 1;   top: 0;  left: 0;  background-color: #111; overflow-x: hidden;   transition: 0.5s;   padding-top: 60px; text-align:center;
  }
  .sidenav a {
   padding: 8px 8px 8px 32px;  text-decoration: none;  font-size: 25px;color: #818181; display: block; transition: 0.3s;
   }
   .sidenav a:hover{  color: #f1f1f1;
   }
   .sidenav .closebtn {position: absolute;  top: 0; right: 25px;  font-size: 36px;  margin-left: 50px;
   }
   @media screen and (max-height: 450px) 
   { .sidenav {padding-top: 15px;
   } 
   .sidenav a {font-size: 18px;
   }
   }

JavaScript部分

function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}