Hamburger to X Morph

Classic hamburger menu icon that morphs into an X when toggled. Pure CSS transitions with a simple class toggle. The most common mobile navigation pattern.

.hamburger {
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  transition: all 0.3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }
.hamburger.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }