Hello! The navigation menu is here!

Try clicking on the red hamburger icon above to make the navigation menu appear!

HTML

<section>
 <div class="flex-container">
    <div class="burger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
 </div>

  <h1 class="nav" id="menuText">Hello! The navigation menu is here!  </h1>
</section>

CSS

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 20rem;
    margin: 0;
  }

  /* CONTAINER HAS KNOWN SIZE */
  .burger {
    position: relative;
    width: 60px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
  }

  /* ALL LINES ARE ABSOLUTELY POSITIONED */
  .burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: red;
    border-radius: 4px;
    transition: 0.35s ease;
    transform-origin: center;
  }

  /* POSITIONS OF LINES IN HAMBURGER STATE */
  .burger span:nth-child(1) {
    top: 0;
  }

  .burger span:nth-child(2) {
    top: 17px;         /* center bar */
  }

  .burger span:nth-child(3) {
    top: 34px;
  }

  /* ACTIVE STATE — ALL LINES MOVE TO MIDDLE FIRST */
  .burger.active span:nth-child(1) {
    top: 17px;         /* move to center */
    transform: rotate(45deg);
  }

  .burger.active span:nth-child(2) {
    opacity: 0;        /* hide middle bar */
  }

  .burger.active span:nth-child(3) {
    top: 17px;         /* move to center */
    transform: rotate(-45deg);
  }

  .nav {
    opacity: 0;
    margin-top: 2rem;
    transition: opacity .4s ease;
    color: gray;
  }

  .nav.show {
    opacity: 1;
  }

Javascript

const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav');

burger.addEventListener('click', () => {
    burger.classList.toggle('active');
    nav.classList.toggle('show');
  });