Membuat Navigasi Responsive dengan Dropdown

Pada kesempatan kali ini saya akan share tentang bagaimana cara membuat navigasi blogger dengan menu dropdown tanpa JQuery. Kita ketahui, banyak sekali template blogger gratisan maupun premium. Dari template itu kadang kala kita menjumpai header atau menu navigasi dengan dropdown tetapi masih menggunakan JQuery.

JQuery tersebut menjadikan loading template kita tambah lama karena kita akan me-load dari hosting pihak ketiga dimana JQuery itu diletakkan. Akses situs web yang lambat bisa membuat pengunjung tidak betah menunggu dan akhirnya pergi ke situs lain.

Kita sebagai blogger pastinya tidak ingin hal tersebut terjadi bukan?, untuk itu bagi teman-teman yang memiliki navigasi pada template masih bantuan JQuery maka teman-teman bisa mengubahnya dengan navigasi pada tutorial dibawah ini.

Catatan: Dalam praktek ini sebaiknya gunakan template yang masih kosong. Jangan lupa melakukan backup agar bisa dikembalikan sewaktu-waktu. Saya menggunakan icon dari FontAwesome ke dalam script. Kamu bisa menggantinya dengan kode SVG agar ringan dan loading lebih cepat.

Masuk ke menu Theme  - Edit HTML. Setelah itu hapus kode script css, javascript, dan tag pemanggil navigasi yang biasaya terletak pada menu header.

Salin script CSS navigasi berikut ini setelah <style> :

/* Tambahkan warna latar belakang hitam ke navigasi atas */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Gaya tautan di dalam bilah navigasi */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Tambahkan kelas aktif untuk menyorot halaman saat ini */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Sembunyikan tautan yang seharusnya membuka dan menutup topnav pada layar kecil */
.topnav .icon {
  display: none;
}

/* Wadah dropdown - diperlukan untuk memposisikan konten dropdown */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Gaya tombol dropdown agar pas di dalam topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Gaya konten dropdown (disembunyikan secara default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Gaya tautan di dalam dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Tambahkan latar belakang gelap pada tautan topnav dan tombol dropdown saat melayang */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Tambahkan latar belakang abu-abu ke tautan dropdown di hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Tampilkan menu dropdown ketika pengguna menggerakkan mouse di atas tombol dropdown */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Saat layar kurang dari 600 piksel, sembunyikan semua tautan, kecuali yang pertama ("Beranda"). Tampilkan tautan yang berisi harus membuka dan menutup topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* Kelas "responsif" ditambahkan ke topnav dengan JavaScript ketika pengguna mengklik ikon. Kelas ini membuat topnav terlihat bagus di layar kecil (tampilkan tautan secara vertikal, bukan horizontal) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

Selanjutnya cari baris script pemanggil elemen navigasi lalu ganti dengan kode di bawah ini:

<div class="topnav" id="myTopnav">
  <a href="#beranda" class="active">Beranda</a>
  <a href="#berita">Berita</a>
  <a href="#iklan">Pasang Iklan</a>
  <div class="dropdown">
    <button class="dropbtn">Layanan Kami
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">Oom.web.id</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Langkah terakhir adalah memasukkan kode Javascript yang diletakkan sebelum </body> :

/* Script Navigasi Responsive Blogger - Oom.web.id */
function myFunction(){var a=document.getElementById("myTopnav");"topnav"===a.className?a.className+=" responsive":a.className="topnav"}

Klik tombol Save lalu lihat hasilnya.

Itulah tadi Cara Membuat Navigasi TopNav Responsive dengan Menu Dropdown yang bisa kamu coba terapkan di blog masing-masing. Tentu saja kamu bisa mengubah pengaturan-pengaturan yang ada untuk disesuaikan dengan keseluruhan desan layout blog kamu. Semoga membantu 🙏