Prosty hamburger w js

Dzisiaj coś prostego, czyli hamburger menu.

Najpierw html:

<button class="hamburger">
  <div class="hamburger-center"></div>
</button>

Następnie style

. Tutaj wykorzystam jak zwykle scss bo niech ktoś mi powie czy jest jeszcze jakaś osoba na Świecie nie korzystająca z preprocesorów css 😉

.hamburger {
  position: relative;
  padding: 35px;
  background-color: #00aeff;
  border: 1px solid lighten(#000, 90%);
  cursor: pointer;

  &.is-open {
    .hamburger-center {
      background-color: transparent;
      transition: background-color 0.25s ease-in;
    }

    &::before {
      transform: translateY(0) rotate(45deg);
      transition: transform 0.25s ease-in;
    }

    &::after {
      transform: translateY(0) rotate(-45deg);
      transition: transform 0.25s ease-in;
    }

  }

  .hamburger-center {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    transition: background-color 0.5s ease-in;
    z-index: 9999;
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    left: 15px;
    top: 50%;
    margin: auto;
    background-color: #fff;
    z-index: 9999;
  }

  &::before {
    transform: translateY(10px) rotate(0);
    transition: transform 0.25s ease-in;
  }

  &::after {
    transform: translateY(-10px) rotate(0);
    transition: transform 0.25s ease-in;
  }
}

No i na koniec proste js:

window.addEventListener('load', () => {
  const hamburger = document.querySelector('.hamburger');
  hamburger.addEventListener('click', e => {
    hamburger.classList.toggle('is-open');
  });
});

Tutaj przydało by się małe wytłumaczenie. Za pomocą zdarzenia click dodaję do głównego div z klasą hamburger nową klasę is-open.
Klasa ta steruje elementami a dokładnie kreskami 🙂 Najpierw zniknięciem środkowej kreski, a dwie - górna jak i dolna za pomocą transition są obracane.
Oczywiście to taki hamburger zawsze robi coś więcej niż tylko ładnie wygląda, ale to już w ramach treningu pozostawiam wam 😉

To tyle, a poniżej jak działa ona w rzeczywistości.

See the Pen
Hamburger in js by Greg (@Tomik23)
on CodePen.