Hamburger Menu Button

by Kirubel Girma

HTML

<div id="icon" class="hamburger">
  <div>

CSS

body {
  background: cornflowerblue;
}

.hamburger {
  width: 2.1em;
  height: 0.4em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
  -ms-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  background: white;
  cursor: pointer;
  -webkit-transition: all 0.25s easeOutCirc(0.175, 0.885, 0.32, 1.275);
  transition: all 0.25s easeOutCirc(0.175, 0.885, 0.32, 1.275);
}

.hamburger:before {
  content: "";
  width: 2.1em;
  height: 0.4em;
  position: absolute;
  top: .8em;
  left: 0;
  background: white;
  -webkit-transition: all 0.25s easeOutCirc(0.175, 0.885, 0.32, 1.275);
  transition: all 0.25s easeOutCirc(0.175, 0.885, 0.32, 1.275);
}

.hamburger:after {
  content: "";
  width: 2.1em;
  height: 0.4em;
  position: absolute;
  top: 1.6em;
  left: 0;
  background: white;
  -webkit-transition: all 0.25s easeOutCirc(0.175, 0.885, 0.32, 1.275);
  transition: all 0.25s easeOutCirc(0.175, 0.885, 0.32, 1.275);
}

.close {
  background: transparent;
}

.close:before {
  -webkit-transform: rotate(45deg) translate(-5px, 0px);
  -ms-transform: rotate(45deg) translate(-5px, 0px);
  transform: rotate(45deg) translate(-5px, 0px);
}

.close:after {
  -webkit-transform: rotate(-45deg) translate(25px, -30px);
  -ms-transform: rotate(-45deg) translate(25px, -30px);
  transform: rotate(-45deg) translate(25px, -30px);
}

JavaScript

document.getElementById('icon').onclick = function() {
  this.classList.toggle('close');
}