Toggle menu

by lucaslimax

HTML

<nav class="menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/signup">Sign Up</a></li>
    <li><a href="/login">Login</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<section class="showcase">
  <header>
    <h2 class="logo">LOGO HERE</h2>
    <div class="toggle"></div>
  </header>
  <main>
    <div class='text'>
      <p id='info'>Text</p>
      <p id='info2'>Text 2</p>
      <p id='uploadinfo'>Text 3</p>
      <a href="/login"><button id='back'>Login</button></a>
      <a href="mailto:EMAIL"><button id='email'>Button</button></a>
    </div>
  </main>
</section>

CSS

#uploadinfo {
  font-family: 'Poppins', sans-serif;
  font-weight: 00;
  color: #fff;
  line-height: 2em;
  text-transform: uppercase;
  font-size: 1em;
  margin: 20px 0;
  max-width: 700px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 45%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#back {
  display: inline-block;
  font-size: 2.5em;
  background: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
  justify-content: center;
  border: none;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 80%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#back:hover {
  letter-spacing: 6px;
}

#email {
  display: inline-block;
  font-size: 2.5em;
  background: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
  justify-content: center;
  border: none;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 90%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#email:hover {
  letter-spacing: 6px;
}

#text {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: #fff;
  line-height: 2em;
  text-transform: uppercase;
  font-size: 1em;
  margin: 20px 0;
  max-width: 700px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 52.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
}

#info {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
  font-size: 3em;
  margin: 20px 0;
  max-width: 700px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 12.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#info2 {
  font-family: 'Poppins',...

JavaScript

window.addEventListener('load', () => {
   const menuToggle = document.querySelector('.toggle');
   const showcase = document.querySelector('.showcase');

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