Sunday, December 28, 2014

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


Penerapan menu bisa dilihat pada postingan ini Side Navigation With Animation

Load disqus comments

2 comments

  1. Canggih uy. Saya suka semua tamplatenya mbak Lina.
    Mbak andai kata semua tutorial yang ada di blog iini saya aplikasikan di blog saya-tanpa pandang bulu-. kira-kira tambah bagus atau tambah semrawut? @@, Rencana mau nyobain tips dan trik dari blognya mbak Lina nih.

    ReplyDelete
    Replies
    1. bisa bgt, tinggal disesuaikan lg dengan blognya

      Delete

Silakan tambahkan komentar sesuai dengan topik, terima kasih.