addEventListener：The EventTarget.addEventListener() method registers the specified listener on the EventTarget it’s called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).
<!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;
}
#menu {
position: absolute;
top: 0;
right: 0;
color: #fff;
background: #4c81e9;
box-sizing: border-box;
width: 180px;
min-height: 100%;
}
#main {
z-index: 1;
background: #eee;
position: absolute;
top: 0;
left: 0;
color: #333;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
transition: .4s;
}
#main.menu-open {
left: -180px;
}
#show {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<div id="main">
<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>
<script>
(function(){
'use strict';
var show = document.getElementById('show');
var main = document.getElementById('main');
show.addEventListener('click', function(){
if (main.className === 'menu-open'){
main.className = '';
} else {
main.className = 'menu-open';
}
});
})();
</script>
</body>
</html>
