document.getElementByIdで、アイコンがクリックされた際に、document.body.className = ‘menu-open’とdocument.body.className = ”を返します。なお、font-awesomeはCDNで取得します。
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top Menu Tab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
padding: 0;
margin: 0;
font-family: Verdana, sans-serif;
background: #eee;
color: #333;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#cover {
background: #000;
opacity: 0.6;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
z-index:1;
display: none;
}
#menu {
z-index:2;
position: absolute;
top: 0;
right: -180px;
color: #fff;
background: #4c81e9;
padding: 8px;
box-sizing: border-box;
width: 180px;
min-height: 100%;
transition: .4s;
}
#show, #hide {
float: right;
cursor: pointer;
}
body.menu-open {
overflow-y: hidden;
}
body.menu-open #cover {
display: block;
}
body.menu-open #menu {
right: 0;
}
</style>
</head>
<body>
<i class="fa fa-bars" id="show"></i>
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
<div id="cover"></div>
<div id="menu">
<i class="fa fa-times" id="hide"></i>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<script>
(function(){
'use strict';
var show = document.getElementById('show');
var hide = document.getElementById('hide');
show.addEventListener('click', function(){
document.body.className = 'menu-open'
});
hide.addEventListener('click', function(){
document.body.className = ''
});
})();
</script>
</body>
</html>
