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 sebelumnya, 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.

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;
}

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;
}

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.

Manambahkan Background Overlay

1. Edit width:100% pada CSS diatas (boleh menggunakan % atau px, saya menggunakan ukuran width:230px

input[type="checkbox"]:checked ~ #menu {
  display: block;
  width: 100%;
  ..........

2. Tambahkan CSS ini

#overlay{
    display: block;
    position: fixed;
    top: 70px;
    left: -50%;
    right: -50%;
    bottom: -50%;
    z-index: 1;
    transition: all .1s ease;
    background: transparent;
    opacity: 0;
    visibility: hidden;
}
input[type="checkbox"]:checked ~ #overlay {
    opacity: 1;
    visibility: visible;
    background: rgba(0,0,0,.2);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(5px);
}

3. Simpan kode ini di bawah </nav>

<div id="overlay"></div>

Penambahan Klik Overlay untuk Close

Pada DEMO di atas, untuk Close hanya mengklik icon burger. Selanjutnya saya akan menambahkan ketika background overlay diklik, menu akan tertutup.

Tambahkan CSS ini

.closeOverlay {
  position: absolute;
  top: 70px;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  z-index:999;
  display:none;
}
input[type="checkbox"]:checked ~ .closeOverlay {
  display:block
}

Kemudian Copy code ini

<label class="closeOverlay" for="openMenu"></label>

Simpan di atas kode

<label for="openMenu" class="ToggleIcon">

Lengkapnya seperti ini

<input type="checkbox" class="openMenu" id="openMenu"/>
<label class="closeOverlay" for="openMenu"></label>
  <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>

Selamat Mencoba..