Panduan Modifikasi Hamburger Menu dan Drawer Navigation Mobile di Blogger (Bagian 3)

Pada tutorial Bagian 2, kita sudah berhasil mengisi area kanan header dengan deretan menu horizontal yang tampak premium saat diakses melalui perangkat desktop. Kita juga sengaja menyembunyikan menu tersebut pada layar smartphone agar tampilan blog tidak berantakan.

Lalu, bagaimana cara pengguna HP mengakses menu navigasi blog kita?

Sebagai penutup dari rangkaian seri perombakan header profesional ini, Bagian 3 akan berfokus penuh pada ranah Mobile UI/UX. Kita akan membuat sebuah tombol ikon tiga garis (biasa disebut Hamburger Menu) yang apabila diketuk oleh pengunjung, akan memunculkan laci menu geser (Drawer Navigation) yang sangat elegan dari sisi samping layar.

Mari kita bongkar kode HTML, CSS, dan sedikit JavaScript ringan untuk merealisasikannya!

PENGUMUMAN SERI TUTORIAL HEADER:

Pastikan Anda sudah mempraktikkan langkah pada tutorial sebelumnya agar struktur kodenya sinkron:

Langkah 1: Memasang HTML Tombol Hamburger & Laci Menu

Kita perlu menambahkan dua komponen baru ke dalam elemen placeholder header kita: tombol pemicu (hamburger) dan wadah laci menu (drawer).

  1. Masuk ke dasbor Blogger > pilih menu Tema (Theme) > klik Edit HTML.
  2. Cari kembali kode <div class='header-navigation-placeholder'> yang sudah kita otak-atik kemarin.
  3. Selipkan kode baru di bawah penutup tag </nav> milik desktop-menu (namun masih di dalam area placeholder). Struktur kodenya akan menjadi seperti ini:
<div class='header-navigation-placeholder'>
  
  <!-- Menu Desktop (Sudah Terpasang di Bagian 2) -->
  <nav class='desktop-menu'>
    ...
  </nav>
  
  <!-- ========================================== -->
  <!-- TAMBAHAN BARU UNTUK BAGIAN 3 (MENU MOBILE) -->
  <!-- ========================================== -->

  <!-- 1. Tombol Hamburger (Hanya Muncul di HP) -->
  <button class='hamburger-toggle' id='hamburgerToggle' aria-label='Buka Menu'>
    <span class='bar'></span>
    <span class='bar'></span>
    <span class='bar'></span>
  </button>

  <!-- 2. Laci Menu Geser (Drawer) -->
  <div class='mobile-drawer' id='mobileDrawer'>
    <div class='drawer-backdrop' id='drawerBackdrop'></div>
    <nav class='drawer-content'>
      <div class='drawer-header'>
        <h3>Navigasi Utama</h3>
        <!-- Tombol Tutup (X) -->
        <button class='close-drawer' id='closeDrawer'>&amp;times;</button>
      </div>
      <ul>
        <li><a href='/'>Beranda</a></li>
        <li><a href='/search/label/Nasional'>Nasional</a></li>
        <li><a href='/search/label/Tutorial'>Tutorial</a></li>
        <li><a href='/p/tentang-kami.html'>Tentang Kami</a></li>
        <li><a class='btn-kontak-mobile' href='/p/kontak.html'>Kontak</a></li>
      </ul>
    </nav>
  </div>

</div>

Langkah 2: Menghias dan Menganimasi dengan CSS

Secara bawaan, laci menu ini harus tersembunyi di luar layar sebelah kanan. Ketika tombol hamburger diketuk, laci tersebut akan bergeser masuk ke dalam layar dengan transisi yang halus.

Cari kode ]] Header Bawaan atau </style> di dalam editor HTML Blogger Anda, lalu tempelkan kode CSS responsive berikut tepat di atasnya:

/* ========================================== */
/* STYLE HAMBURGER & DRAWER MENU MOBILE       */
/* ========================================== */

/* 1. Mengatur Desain Tombol Hamburger (Tiga Garis) */
.hamburger-toggle {
  display: none; /* Disembunyikan di desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.hamburger-toggle .bar {
  width: 100%;
  height: 3px;
  background-color: #333333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 2. Struktur Laci Menu (Mobile Drawer) */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  visibility: hidden; /* Sembunyi sebelum aktif */
  transition: visibility 0.3s;
}

/* Efek latar belakang blur/gelap saat menu terbuka */
.drawer-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Konten isi laci menu */
.drawer-content {
  position: absolute;
  top: 0;
  right: -300px; /* Dorong keluar layar kanan sejauh 300px */
  width: 280px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease; /* Efek geser halus */
}

/* Header di dalam laci */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eceff1;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.drawer-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-family: sans-serif;
}

.close-drawer {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  line-height: 1;
}

/* Mengatur barisan link di dalam laci */
.drawer-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-content ul li a {
  text-decoration: none;
  color: #444444;
  font-size: 16px;
  font-weight: 600;
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #f5f7f8;
}

.drawer-content ul li a:hover {
  color: var(--merah-ri);
}

.drawer-content ul li a.btn-kontak-mobile {
  background-color: var(--merah-ri);
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
  border-bottom: none;
}

/* 3. KELAS AKTIF (Dipicu oleh JavaScript) */
.mobile-drawer.is-active {
  visibility: visible;
}
.mobile-drawer.is-active .drawer-backdrop {
  opacity: 1;
}
.mobile-drawer.is-active .drawer-content {
  right: 0; /* Tarik masuk kembali ke layar */
}

/* ========================================== */
/* RESPONSIVITAS: MEMUNCUHKAN MENU DI HP       */
/* ========================================== */
@media screen and (max-width: 768px) {
  .hamburger-toggle {
    display: flex; /* Munculkan hamburger di HP */
  }
}

Langkah 3: Menyuntikkan JavaScript Sakelar (Toggle)

Agar tombol buka dan tutup bisa berfungsi mengubah kelas CSS .is-active di atas, kita butuh skrip JavaScript super ringan. Skrip ini aman dari pinalti kecepatan Google PageSpeed karena tidak menggunakan library berat seperti jQuery.

Cari tag </body> di bagian paling bawah editor HTML Blogger Anda, lalu tempelkan kode skrip berikut tepat di atas tag </body>:

<script>
//<![CDATA[
  const hamburgerToggle = document.getElementById('hamburgerToggle');
  const mobileDrawer = document.getElementById('mobileDrawer');
  const closeDrawer = document.getElementById('closeDrawer');
  const drawerBackdrop = document.getElementById('drawerBackdrop');

  // Fungsi membuka laci menu
  hamburgerToggle.addEventListener('click', () => {
    mobileDrawer.classList.add('is-active');
  });

  // Fungsi menutup laci menu via tombol (X)
  closeDrawer.addEventListener('click', () => {
    mobileDrawer.classList.remove('is-active');
  });

  // Fungsi menutup laci menu dengan mengetuk area luar/backdrop
  drawerBackdrop.addEventListener('click', () => {
    mobileDrawer.classList.remove('is-active');
  });
//]]>
</script>

Hasil Akhir Pembuatan Header Profesional

Selamat! Rangkaian panjang modifikasi struktural header blog Anda kini telah rampung sepenuhnya.

Jika Anda membuka blog menggunakan laptop, Anda akan melihat susunan menu horizontal yang bersih dengan tombol kontak merah yang menonjol. Namun, jika Anda mengecilkan ukuran peramban atau mengaksesnya langsung via HP, menu tersebut secara cerdas berganti menjadi tombol hamburger tiga garis yang responsif dan interaktif.

Struktur header semacam ini sangat ramah SEO, menjaga nilai User Experience tetap tinggi di semua jenis perangkat, serta siap dihiasi dengan logo bertema kemerdekaan menyambut perayaan HUT RI nanti.

Dengan selesainya bagian ini, kita sudah memiliki fondasi layout atas yang kokoh. Di artikel berikutnya, kita akan beralih ke ranah dekorasi visual, yaitu membuat ornamen pita kemerdekaan murni menggunakan trik CSS tanpa membebani performa loading blog.

Jika laci menu Anda tidak mau bergeser keluar atau tombol X tidak merespons, silakan tuliskan susunan kode Anda di kolom komentar untuk kita bedah bersama. Sampai jumpa di tutorial berikutnya!

Lokasi: Malang, Kota Malang, Jawa Timur, Indonesia

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Beranda Asli untuk Blog Blogger (Blogspot)

Gambar
Halaman beranda ( homepage ), landing page , atau halaman yang dimuat saat pembaca mengunjungi URL utama blog Anda, dapat membantu blog mendapatkan lebih banyak pengunjung. Fitur ini berguna untuk membuat blog memuat lebih cepat, mendapatkan lebih banyak pelanggan ( subscriber ), memperkenalkan tajuk utama blog, atau membuat tampilan blog Anda terlihat lebih profesional.
Baca selengkapnya

Bedah Visual Logo Sayembara HUT ke-81 RI: Mana yang Paling Ramah Desain Template Blogger?

Gambar
Menjelang peringatan Hari Kemerdekaan Republik Indonesia yang ke-81, atmosfer kreativitas nasional mulai memanas. Salah satu peristiwa yang paling disorot saat ini adalah proses penunjukan logo resmi HUT ke-81 RI yang dilakukan melalui mekanisme sayembara lomba desain oleh pemerintah. Saat ini, pemerintah tengah menunggu hasil akhir penunjukan logo yang akan menjadi identitas visual utama perayaan tahun ini.
Baca selengkapnya