Kode Bikin Menu Navigasi Dropdown Super Responsif Khusus Tampilan HP (Mobile)

Apa Itu Menu Navigasi Dropdown Mobile?

Menu navigasi dropdown mobile adalah sistem navigasi yang dirancang untuk perangkat dengan ukuran layar kecil seperti smartphone. Daftar tautan tidak ditampilkan seluruhnya sejak awal, tetapi ditempatkan di dalam sebuah tombol yang dapat dibuka dan ditutup.

Cara ini membantu menghemat ruang pada bagian atas halaman. Pengunjung cukup menekan tombol navigasi ketika ingin membuka kategori atau halaman tertentu.

Bagaimana Cara Kerja Menu Dropdown?

Manfaat Menu Navigasi Responsif di Blogger

• Menghemat ruang layar: daftar menu tidak memenuhi area layar smartphone.
• Lebih nyaman digunakan: pengunjung dapat membuka navigasi ketika diperlukan.
• Tampilan lebih rapi: halaman tidak dipenuhi banyak tautan pada bagian atas.
• Mudah dikembangkan: Anda dapat menambahkan kategori dan halaman sesuai kebutuhan.
• Lebih sesuai untuk mobile: tombol navigasi dibuat agar mudah disentuh pada layar kecil.

Apakah Menu Dropdown Berpengaruh terhadap SEO?

Menu dropdown tidak secara otomatis membuat artikel mendapatkan peringkat lebih tinggi di mesin pencari. Namun, navigasi yang jelas dan mudah digunakan dapat membantu pengalaman pengguna.

Karena itu, gunakan menu untuk membantu pengunjung menemukan halaman penting dengan cepat, bukan sekadar memasukkan banyak kata kunci ke dalam navigasi.

Kode Lengkap Menu Navigasi Dropdown Blogger

Berikut adalah kode lengkap yang dapat digunakan untuk membuat menu navigasi dropdown responsif di Blogger. Bagian kode tetap menggunakan struktur HTML, CSS, dan JavaScript sehingga dapat dipelajari dan disesuaikan dengan kebutuhan blog.

<style>

.blogger-mobile-nav {
  display: none;
  width: 100%;
  max-width: 100%;
  margin: 0 0 25px;
  position: relative;
  z-index: 20;
  box-sizing: border-box;
}

.blogger-mobile-nav *,
.blogger-mobile-nav *::before,
.blogger-mobile-nav *::after {
  box-sizing: border-box;
}

.blogger-mobile-nav .bmn-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: #2563eb;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 12px rgba(37,99,235,.18);
}

.blogger-mobile-nav .bmn-toggle:hover {
  background: #1d4ed8;
}

.blogger-mobile-nav .bmn-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  min-width: 24px;
  height: 24px;
}

.blogger-mobile-nav .bmn-icon span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
  transition: transform .25s ease, opacity .2s ease;
}

.blogger-mobile-nav .bmn-toggle[aria-expanded="true"] .bmn-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.blogger-mobile-nav .bmn-toggle[aria-expanded="true"] .bmn-icon span:nth-child(2) {
  opacity: 0;
}

.blogger-mobile-nav .bmn-toggle[aria-expanded="true"] .bmn-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.blogger-mobile-nav .bmn-dropdown {
  display: none;
  width: 100%;
  margin-top: 7px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(15,23,42,.08);
}

.blogger-mobile-nav .bmn-dropdown.bmn-open {
  display: block;
  animation: bmnSlideDown .25s ease;
}

@keyframes bmnSlideDown {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blogger-mobile-nav .bmn-dropdown a {
  display: block;
  width: 100%;
  padding: 13px 16px;
  color: #1f2937;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
}

.blogger-mobile-nav .bmn-dropdown a:last-child {
  border-bottom: 0;
}

.blogger-mobile-nav .bmn-dropdown a:hover {
  color: #2563eb;
  background: #f8fafc;
}

@media screen and (max-width: 768px) {
  .blogger-mobile-nav {
    display: block;
  }
}

</style>

<div class="blogger-mobile-nav">

  <button
    type="button"
    class="bmn-toggle"
    id="bmnToggle"
    aria-expanded="false"
    aria-controls="bmnDropdown"
  >

    <span>Menu Navigasi</span>

    <span class="bmn-icon" aria-hidden="true">
      <span></span>
      <span></span>
      <span></span>
    </span>

  </button>

  <nav
    class="bmn-dropdown"
    id="bmnDropdown"
    aria-label="Menu navigasi mobile"
  >

    <a href="URL_BERANDA_ANDA">
      Beranda
    </a>

    <a href="URL_KATEGORI_TECHNOLOGI">
      Teknologi
    </a>

    <a href="URL_KATEGORI_BLOGGER">
      Tutorial Blogger
    </a>

    <a href="URL_KATEGORI_TIPS">
      Tips dan Trik
    </a>

    <a href="URL_KONTAK_ANDA">
      Kontak
    </a>

  </nav>

</div>

<script>

(function() {

  var tombol = document.getElementById("bmnToggle");
  var dropdown = document.getElementById("bmnDropdown");

  if (!tombol || !dropdown) {
    return;
  }

  tombol.addEventListener("click", function() {

    var terbuka =
      tombol.getAttribute("aria-expanded") === "true";

    tombol.setAttribute(
      "aria-expanded",
      String(!terbuka)
    );

    dropdown.classList.toggle(
      "bmn-open",
      !terbuka
    );

  });

})();

</script>

Penjelasan Kode Menu

HTML

Bagian HTML membuat tombol Menu Navigasi dan elemen nav yang berisi daftar tautan. Anda dapat mengganti nama menu dan URL sesuai struktur blog.

CSS

CSS digunakan untuk mengatur tampilan tombol, dropdown, warna, jarak, border, animasi, serta ukuran menu pada perangkat mobile.

JavaScript

JavaScript mendeteksi ketika tombol ditekan kemudian mengubah kondisi dropdown dari tertutup menjadi terbuka atau sebaliknya.

Ikon Hamburger

Ikon hamburger dibuat menggunakan tiga elemen span dan CSS. Dengan cara ini, kode tidak menggunakan karakter HTML khusus yang berpotensi tampil sebagai teks mentah pada halaman Blogger.

Cara Memasang Menu Dropdown di Blogger

1. Masuk ke dashboard Blogger. Buka blog yang ingin diberi menu navigasi mobile.
2. Buka menu Tata Letak. Tentukan lokasi tempat menu ingin ditampilkan.
3. Tambahkan Gadget HTML/JavaScript. Gunakan gadget tersebut untuk memasukkan kode.
4. Salin seluruh kode. Pastikan bagian CSS, HTML, dan JavaScript ikut disalin.
5. Ganti URL menu. Sesuaikan setiap URL dengan halaman yang tersedia di blog.
6. Simpan dan lakukan pengujian. Buka blog menggunakan smartphone untuk memastikan menu bekerja.

Cara Mengganti Link Menu

Cari bagian berikut di dalam kode:

<a href="URL_BERANDA_ANDA">
  Beranda
</a>

Kemudian ganti URL_BERANDA_ANDA dengan URL beranda blog Anda.

Contohnya:

<a href="https://namablog.blogspot.com/">
  Beranda
</a>

Cara Menambahkan Kategori Baru

Anda dapat menambahkan kategori baru dengan membuat elemen tautan tambahan di dalam bagian dropdown.

<a href="URL_KATEGORI_ANDA">
  Nama Kategori
</a>

Ganti URL dan nama kategori sesuai halaman tujuan.

Contoh Struktur Menu Blog

Untuk blog yang membahas Blogger dan teknologi, struktur menu sederhana dapat dibuat seperti berikut:

• Beranda untuk halaman utama blog.
• Tutorial Blogger untuk artikel seputar Blogger.
• SEO untuk artikel optimasi mesin pencari.
• HTML dan CSS untuk tutorial kode dan desain.
• Kontak untuk halaman komunikasi.

Apakah Menu Ini Responsif di HP?

Ya. CSS menggunakan media query sehingga menu dapat ditampilkan khusus pada layar dengan lebar maksimal 768 piksel.

Pada layar yang lebih besar, komponen menu mobile disembunyikan agar tidak mengganggu navigasi desktop yang mungkin sudah tersedia pada template Blogger.

Tips SEO untuk Menu Navigasi Blogger

• Gunakan nama menu yang jelas. Pengunjung harus dapat memahami tujuan setiap tautan.
• Prioritaskan halaman penting. Hindari memasukkan terlalu banyak menu yang tidak diperlukan.
• Gunakan URL yang relevan. Pastikan tautan mengarah ke halaman yang sesuai.
• Hindari keyword stuffing. Nama menu sebaiknya tetap natural.
• Utamakan pengalaman pengguna. Menu harus mudah disentuh dan dibaca pada smartphone.

Masalah yang Sering Terjadi

Menu Tidak Muncul di HP

Pastikan kode media query max-width: 768px masih terdapat di dalam CSS dan gadget ditempatkan pada lokasi Blogger yang benar.

Menu Tidak Terbuka

Periksa JavaScript dan pastikan ID bmnToggle serta bmnDropdown tidak diubah.

Link Menu Tidak Berfungsi

Periksa kembali atribut href dan pastikan URL tujuan ditulis dengan benar.

Menu Menyebabkan Scroll Horizontal

Pastikan tidak ada CSS dari template yang memberikan lebar tetap terlalu besar pada elemen menu. Kode ini sendiri menggunakan width: 100% dan overflow yang dibatasi.

Cara Testing Menu Navigasi Mobile

• Pastikan tombol menu muncul pada smartphone.
• Tekan tombol dan pastikan dropdown terbuka.
• Tekan kembali dan pastikan dropdown dapat ditutup.
• Klik setiap link dan pastikan halaman tujuan benar.
• Pastikan teks menu mudah dibaca.
• Pastikan tidak ada scroll horizontal.
• Uji kembali pada beberapa ukuran layar.

Kesimpulan

Membuat menu navigasi dropdown responsif untuk Blogger dapat dilakukan menggunakan HTML, CSS, dan JavaScript. Menu ini membantu membuat navigasi lebih ringkas ketika blog dibuka melalui smartphone.

Struktur kode menggunakan class khusus agar aturan CSS lebih terisolasi dari template. Ikon hamburger juga dibuat dengan CSS sehingga tidak menggunakan karakter khusus yang dapat tampil sebagai kode mentah.

Bagian precode tetap dipertahankan dalam artikel agar pembaca dapat langsung melihat dan menyalin kode tutorial. Pada perangkat mobile, blok kode menggunakan horizontal scrolling sehingga kode panjang tidak merusak lebar halaman.

FAQ Menu Navigasi Dropdown Blogger