Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat menu Responsive Pure CSS dengan Icon Burger

Membuat menu Responsive CSS only (pure CSS) tanpa JavaScript

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.

Responsive Menu

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.

Update 19-04-2023 Penambahan Background Overlay

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>

Kalau masih ada masalah silahkan share di kolom komentar...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

19 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Mantap temanya.. 👍
    1. ada yang ngasih hehhee
  2. Hello sir please check my email to you with email id [email protected]
    1. ok.. wait for reply
  3. keren themanya inspirasi untuk ngeblogger
    1. thanks mas... semangat terus ngeblognya, sukses juga buat usaha las listriknya
  4. assalanualaikum kang ismet salam kenal
    1. waalaikumussalam, sama2... keren blognya mengajarkan tips-tips bermanfaat
  5. Klo menunya fixs bisa gak kang
    1. fiks gimana?
  6. Setelah nyari muter muter ketemu disini yang saya suka, terimakasih kang.
  7. Selamat sore bang.. aku sudah coba buat sama dengan kode nya abang, tapi kok burger ikon saya gak bisa ya ?
    1. linknya mana mas?
  8. Kang. Saya pakai menu navigasi ini. Tapi bisa request gak. Menunya versi mobile dibikin 70% saja. Terus sisa 30% nya dibikin blur. Kayaknya keren. Ditunggu jawabannya kang.
    1. di ujicoba aja mas, pada CSS input[type="checkbox"]:checked ~ #menu { width nya diubah misal 50% atau berapa aja. kalau mau ada objek blur berarti harus 2 objek
    2. Berarti satu objek dibikin 70%, 1 objeknya lg dibikin 100% gitu ya kang? Atau bisa kasih kode css nya untuk objek keduanya kang. Biar saya pasang di blog saya.

      Soalnya masih belum paham bikinnya.
    3. saya sudah update tutorial ini, silahkan liat di Penambahan Background Overlay
    4. Wah makasih banyak kang. Fast respon banget nih. Nanti saya request tutorial lagi. Hehehe
  9. Kang, menu dropdownnya kan kalo di klik ngebuka kebawah, nah ada satu masalah, ketika di klik kembali gak mau nutup. Tolong di perbaiki kang
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.