Slide in menu

keyframe animation example

HTML

<div class="menu offscreen hidden" id="side_menu">

</div>

<button id="menu_button">
  menu
</button>

CSS

body {
  margin: 0;
}
.menu {
  display:inline-block;
  height:100vh;
  width: 200px;
  background-color:red;
}
.menu.onscreen {
  animation: slide-right .3s ease-out forwards;
}
.menu.offscreen {
  animation: slide-left .3s  ease-in forwards;
}
button {
  position: absolute;
  top:10px;
  right: 10px;
}
.hidden {
  display:none !important;
}

@keyframes slide-left {
  0% {
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-100%);
  }
}
@keyframes slide-right {
  0% {
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(0%);
  }
}

JavaScript

const buttonEl = document.getElementById('menu_button');
const menuEl = document.getElementById('side_menu');
let timeout;

const toggleMenu = function(){
if (timeout) clearTimeout(timeout);
	if (menuEl.classList.contains('offscreen')) {
  	menuEl.classList.add('onscreen');
  	menuEl.classList.remove('offscreen', 'hidden');
  }
  else {
  	menuEl.classList.add('offscreen');
    menuEl.classList.remove('onscreen');
    timeout = setTimeout(()=>{
    	menuEl.classList.add('hidden');
    }, 300)
  }
}


buttonEl.addEventListener('click', toggleMenu);