<div class="hamburger">
  <div></div>
  <div></div>
  <div></div>
</div>
.hamburger {
  height: 48px;
  width: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
}

.hamburger > div {
  background: #000000;
  width: 100%;
  height: 7px;
  border-radius: 3px;
  transition: all 250ms ease-in-out;
}

.hamburger.open > div:first-child {
  transform: translateY(16px) rotate(45deg);
}

.hamburger.open > div:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.hamburger.open > div:last-child {
  transform: translateY(-16px) rotate(-45deg);
}
const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', () => {
  if (hamburger.classList.contains('open')) {
    hamburger.classList.remove('open');
  } else {
    hamburger.classList.add('open');
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.