Slide out menu

by akmiecik

HTML

<!-- Video Source -->
  <!-- https://www.pexels.com/video/aerial-view-of-beautiful-resort-2169880/ -->
  <div id="content">
    <div class="menu-toggle"></div>
  </div>
  
  <div class="main-navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Destination</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

CSS

.menu-toggle
{
  position: relative;
  left: 99vw;
  top: -60vh;
  width: 60px;
  height: 60px;
  background: url(https://i.ibb.co/HrfVRcx/menu.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}
.menu-toggle.active
{
  background: url(https://i.ibb.co/rt3HybH/close.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  cursor: pointer;
}
#content
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  transition: 0.5s;
  z-index: 2;
}
#content.active
{
  right: 300px;
}

.main-navigation
{
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-navigation ul
{
  position: relative;
}
.main-navigation ul li
{
  list-style: none;
}
.main-navigation ul li a
{
  text-decoration: none;
  font-size: 24px;
  color: #111;
}
.main-navigation ul li a:hover
{
  color: #03a9f4; 
}

JavaScript

const menuToggle = document.querySelector('.menu-toggle');
const showcase = document.querySelector('#content');

    menuToggle.addEventListener('click', () => {
    menuToggle.classList.toggle('active');
    showcase.classList.toggle('active');
 })