<button class="open">Open</button>
<div class="menu">
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="" class="nav__link">Link</a></li>
<li class="nav__item"><a href="" class="nav__link">Link</a></li>
<li class="nav__item"><a href="" class="nav__link">Link</a></li>
<li class="nav__item"><a href="" class="nav__link">Link</a></li>
<li class="nav__item"><a href="" class="nav__link">Link</a></li>
</ul>
<button class="clouse">Clouse</button>
</nav>
</div>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
position: relative;
overflow: hidden;
}
.menu {
width: 300px;
height: 100%;
padding: 20px;
background: #000;
position: absolute;
top: 0;
right: -300px;
transition: transform .5s;
&--open {
transform: translateX(-300px);
}
}
.nav {
position: relative;
button {
position: absolute;
top: 0;
right: 0;
}
&__list {
list-style-type: none;
margin: 0;
padding: 0;
}
&__item {
padding: 3px 0;
}
&__link {
text-decoration: none;
color: #fff;
font-size: 18px;
}
}
View Compiled
const menu = document.querySelector('.menu');
const open = document.querySelector('.open');
const clouse = document.querySelector('.clouse');
open.addEventListener('click', () => {
menu.classList.add('menu--open')
})
clouse.addEventListener('click', () => {
menu.classList.remove('menu--open')
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.