jQUery スマホ menu 右から

body {
padding: 0;
margin: 0;
font-family: Verdana, sans-serif;
background: #eee;
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 {
position: absolute;
top:0;
right:-180px;
background: #4c81e9;
color:#fff;
padding: 8px;
box-sizing: border-box;
width: 180px;
min-height: 100%;
z-index: 2;
transition: 0.4s ease;
}

#show, #hide {
float: right;
cursor: pointer;
}

#main.menu-open {
left:-160px;
transition: 0.4s;
}

body.menu-open {
overflow-y: hidden;
}

body.menu-open #cover {
display: block;
}

body.menu-open #menu {
right: 0;
}

</style>
</head>
<body class="menu-open">

<i class="fa fa-bars" id="show"></i>
<h1>タイトル</h1>
<p>文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。
</p>

<p>文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。
</p>

<p>文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。文章。
</p>
</div>

<div id="cover"></div>

<!-- menu 右-->
<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>

 

------

/*--- 右から出現 ---*/
(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 = '';
});

})();