Hamburger Menu Button

Hamburger Menu Button - Merupakan tombol menu yang biasa diterapkan pada menu navigasi untuk memunculkan konten menu dengan bantuan jquery toggle.

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

.hamburger {
  width: 110px;
  height: 20px;
  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 cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hamburger:before {
  content: "";
  width: 110px;
  height: 20px;
  position: absolute;
  top: 35px;
  left: 0;
  background: white;
  -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hamburger:after {
  content: "";
  width: 110px;
  height: 20px;
  position: absolute;
  top: 70px;
  left: 0;
  background: white;
  -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: all 0.25s cubic-bezier(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);
}

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

Contoh lain dengan efek berbeda

Result

Penerapan menu bisa dilihat pada postingan ini Side Navigation With Animation