Membuat menu Responsive Pure CSS dengan Icon Burger

Pure CSS Burger Menu - Pada tutorial kali ini saya akan menjelaskan Cara membuat Menu Responsive dengan icon Burger pure CSS tanpa JavaScript. Mungkin anda sering melihat Menu navigasi ketika menggunakan media kecil seperti HP muncul Garis Tiga , itulah yang dinamakan icon Burger, ya kalau diperhatikan mirip hamburger.


Tutorial ini merupakan kelanjutan dari tutorial sebelumnya Step By Step Memahami Pembuatan Menu Dropdown. Jadi silahkan ikuti dulu tutorial tersebut dan kita akan lanjutkan membuat menu tersebut menjadi responsive (Silahkan download sourcenya untuk mempelajarinya). Oke kita lanjutkan ke langkah berikutnya.

Menambah Icon Burger

Setelah kita membuat menu Dropdown seperti ini, kita akan menambahkan icon toggle nya berupa icon burger. Tambahkan HTML ini sebelum header.

<input type="checkbox" class="openMenu" id="openMenu"/>
  <label for="openMenu" class="ToggleIcon">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
</label>

Tambahkan CSS ini

/* Toggle Icon Burger) */
.ToggleIcon {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 27px; /* jarak icon burger dari atas */
  right: 27px;  /* jarak icon burger dari kanan */
  height: 22px; /* sesuaikan ukuran */
  width: 22px;	
}
.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
  display:block;
}
.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}
.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}
.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

Kemudian, supaya diklik menjadi silang (X) maka tambahakan lagi dibawahnya CSS ini :

/* 	Efek icon burger berganti menjadi silang */
input[type=checkbox]:checked ~ .ToggleIcon > .horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}
input[type=checkbox]:checked ~ .ToggleIcon > .diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}
input[type=checkbox]:checked ~ .ToggleIcon > .diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

input.openMenu {
  position: fixed;
  top: -100px;
  opacity: 0
}

Nah, sampai di sini, icon akan muncul di kanan atas, tapi ketika diklik belum memberikan efek apa pun terhadap menu, hanya memunculkan dulu icon.

Lihat Hasil

Menyembunyikan Icon Burger

Setelah icon kita buat, maka sekarang kita akan sembunyikan dan nanti akan dimunculkan pada layar berukuran kecil, tergantung kita seting di media queries berpa px. Tambahkan CSS ini :

/*	Sembunyikan Icon Burger */
label.ToggleIcon {
  display: none;
}

Untuk melihat efeknya, silahkan resize window. Icon sebetulnya ada, tapi sementara kita sembunyikan.

Lihat Hasil

Menampilkan Icon dan Menu Horizontal

Sekarang kita akan munculkan icon burger, sekaligus menghilangkan menu Horizontal berganti menjadi Vertikal. Saya set di media queries 960px, silahkan atur sesuai keinginan. Tambahkan CSS ini :

/*	Pada ukuran layar 960px mulai pengaturan Responsive */
@media screen and (max-width:960px){
#menu {
  display:none; /* menu horizantal disembunyikan */
}	
label.ToggleIcon {
  display:block; /* burger icon dimunculkan */
}

/* Merubah menu menjadi vertikal ketika Burger icon diklik*/
input[type="checkbox"]:checked ~ #menu {
  display: block;
  width: 100%;
  background: #777;
  position: fixed;
  top: 70px;
  left: 0;
  height: 100vh;
  overflow-y: visible;
  padding: 10px 0 0 0;
  scrollbar-width: none;
  scrollbar-width: none;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 9999;
}
input[type="checkbox"]:checked ~ #menu li {
  position: relative;
  margin:0;
  display: block;
  text-align: left;
  float:none;
}
input[type="checkbox"]:checked ~ #menu ul.menus{
  height:auto;
  overflow:hidden;
  width:100%;
  background:#666;
  position:relative;
}
input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

Silahkan lihat hasilnya, supaya efeknya terlihat silahkan resize window.

Lihat Hasil

Menambah Efek Slide in

Pada hasil di atas, munculan menu vertikal masih terasa kasar, kita akan haluskan dengan pergeseran menu dari sebelah kiri. Tammbahkan CSS ini:

/* Memberikan efek slide muncul dari kiri */
@-webkit-keyframes slideInLeft {
 0%{
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
   }
   }
}

Sampai sini, kita telah selesai membuat menu Responsive murni CSS tanpa Java Script.

Semoga bermanfaat...
Special Thanks to: Kompi Ajaib aka Dukun Blog 😃