Slide menu que está genial para tus páginas web. Sobre todo aquellas que deseas se vean bien en dipositivos móviles. Es simple pero efectivo. Totalmente modificable y limpio en su código
<header class="header">
<button class="open-menu">
Open
</button>
Logo
<nav class="header--nav">
<button class="close-menu">
Close
</button>
<!-- Links -->
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</nav>
</header>
.header {
background: #fff;
border-bottom: 1px solid #f5f5f5;
padding: 1em;
}
.header--nav {
background: #fff;
padding: 1em;
margin: 0;
text-align: center;
overflow: auto;
height: 100%;
width: 80%;
max-width: 320px;
position: fixed;
z-index: 1;
top: 0;
left: -100%;
-webkit-transition: left .5s ease-out;
transition: left .5s ease-out;
}
.header--nav a {
display: block;
}
.active .header--nav {
left: 0;
}
.active:after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
.open-menu {
margin-right: 1em;
}
.close-menu {
margin-bottom: 1em;
}
var html = document.documentElement;
document.querySelector('.open-menu').onclick = function(){
html.classList.add('active');
};
document.querySelector('.close-menu').onclick = function(){
html.classList.remove('active');
};
html.onclick = function(event){
if (event.target === html){
html.classList.remove('active');
}
};