Pure JS slider menu
HTML
<svg onclick="openMenu()" class="menu-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 18h13v-2H3v2zm0-5h10v-2H3v2zm0-7v2h13V6H3zm18 9.59L17.42 12 21 8.41 19.59 7l-5 5 5 5L21 15.59z"/></svg>
<div id="side-menu" class="side-menu">
<div class="inner-menu">
<svg onclick="hideMenu()" class="close-menu" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
<ul class="navigation">
<li>
<a class="#">Menu Item</a>
</li>
<li>
<a class="#">Menu Item</a>
</li>
<li>
<a class="#">Menu Item</a>
</li>
<li>
<a class="#">Menu Item</a>
</li>
<li>
<a class="#">Menu Item</a>
</li>
</ul>
</div>
</div>
CSS
.side-menu{
display:block;
position: fixed;
z-index:999;
top:0;
left:-280px;
width:280px;
height:100vh;
background-color:#000;
transition: all 0.5s;
-webkit-box-shadow: 0 0 0 0 #000000;
box-shadow: 0 0 0 0 #000000;
}
.menu-icon{
display:fixed;
position: absolute;
top:5px;
left:10px;
cursor:pointer;
}
.side-menu.show{
left:0;
-webkit-box-shadow: 0 20px 0 #000000;
box-shadow: 0 0 20px 0 #000000;
}
.inner-menu{
display:flex;
position: relative;
width:280px;
height:100vh;
}
.close-menu{
display:block;
position:absolute;
right:10px;
top:5px;å
cursor:pointer;
cursor:pointer;
}
.navigation{
display:block;
margin:40px 0 0 0;
padding:0;
list-style:none;
width:100%;
}
.navigation li{
background-color:#336699;
}
.navigation li a{
display:block;
padding:15px;
background:#333;
color:#efefef;
line-height:1em;
widith:100%;
cursor:pointer;
transition: all 0.5s;
}
.navigation li a:hover{
background:#ccc;
color:#000;
}
JAVASCRIPT
function openMenu() {
var element = document.getElementById("side-menu");
element.classList.add("show");
}
function hideMenu() {
var element = document.getElementById("side-menu");
element.classList.remove("show");
}
