Arsitektur Sistem Payment Gateway

 

Cara Membuat Menu Hamburger Modern di Blogger (Lengkap dengan Animasi Slide & Stagger)

Pada tutorial ini kita akan membuat menu hamburger modern untuk blog Blogger dari awal sampai akhir. Fitur yang akan kita buat:

• Ikon hamburger yang berubah menjadi tanda X dengan animasi mulus
• Menu slide dari kiri
• Overlay gelap di belakang menu
• Animasi item menu muncul berurutan (stagger otomatis)
• Tombol tutup (✕)
• Otomatis menutup saat klik link atau overlay

---

1. Persiapan

Pastikan kamu sudah masuk ke Tema → Edit HTML. Kita akan menambahkan 3 bagian kode:

1. CSS → di atas </head>
2. HTML → di dalam header / tempat tombol menu
3. JavaScript → di atas </body>

---

2. Kode HTML

Tempel kode berikut di tempat yang kamu inginkan (biasanya di dalam header):

<!-- ===== Hamburger Menu ===== -->
<div class="hm-wrapper">
  <button class="hm-btn" id="hmBtn" aria-label="Buka Menu">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <nav class="hm-menu" id="hmMenu">
    <div class="hm-header">
      <span class="hm-title">Menu</span>
      <button class="hm-close" id="hmClose" aria-label="Tutup Menu">✕</button>
    </div>
    <ul>
      <li><a href="/">Beranda</a></li>
      <li><a href="/p/about.html">Tentang</a></li>
      <li><a href="/search/label/Tutorial">Tutorial</a></li>
      <li><a href="/search/label/Review">Review</a></li>
      <li><a href="/p/contact.html">Kontak</a></li>
    </ul>
  </nav>
</div>

---

3. Kode CSS

Tempel kode CSS ini sebelum tag </head>:

/* ===== Hamburger Menu CSS ===== */
.hm-wrapper {
  position: relative;
  z-index: 9999;
}

/* Tombol Hamburger */
.hm-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.hm-btn span {
  display: block;
  width: 26px;
  height: 3px;
  background: #222;
  border-radius: 3px;
  transition: all 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Animasi jadi X */
.hm-btn.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hm-btn.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hm-btn.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Menu Slide */
.hm-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85%;
  height: 100%;
  background: #ffffff;
  box-shadow: 4px 0 25px rgba(0,0,0,0.12);
  transform: translateX(-105%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.hm-menu.active {
  transform: translateX(0);
}

/* Header Menu */
.hm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid #eee;
}

.hm-title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

.hm-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #666;
  line-height: 1;
  padding: 4px 8px;
}

/* Daftar Menu */
.hm-menu ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.hm-menu ul li a {
  display: block;
  padding: 15px 25px;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.35s ease;
  opacity: 0;
  transform: translateX(-25px);
}

.hm-menu.active ul li a {
  opacity: 1;
  transform: translateX(0);
}

.hm-menu ul li a:hover {
  background: #f8f8f8;
  color: #e63946;
  padding-left: 30px;
}

/* Overlay */
.hm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
  z-index: 9997;
}

.hm-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Sembunyikan di desktop (opsional) */
@media (min-width: 992px) {
  .hm-wrapper {
    display: none;
  }
}

---

4. Kode JavaScript (Stagger Otomatis)

Tempel kode JavaScript ini sebelum tag </body>:

<script>
document.addEventListener('DOMContentLoaded', function () {
  const btn      = document.getElementById('hmBtn');
  const menu     = document.getElementById('hmMenu');
  const closeBtn = document.getElementById('hmClose');
  const items    = menu.querySelectorAll('ul li a');

  // Buat overlay
  const overlay = document.createElement('div');
  overlay.className = 'hm-overlay';
  document.body.appendChild(overlay);

  // ===== Stagger Otomatis =====
  const delayStep = 0.1; // 0.1 detik per item
  
  items.forEach(function(item, index) {
    item.style.transitionDelay = (index * delayStep) + 's';
  });

  function openMenu() {
    btn.classList.add('active');
    menu.classList.add('active');
    overlay.classList.add('active');
    document.body.style.overflow = 'hidden';
  }

  function closeMenu() {
    btn.classList.remove('active');
    menu.classList.remove('active');
    overlay.classList.remove('active');
    document.body.style.overflow = '';
  }

  // Event
  btn.addEventListener('click', function () {
    menu.classList.contains('active') ? closeMenu() : openMenu();
  });

  closeBtn.addEventListener('click', closeMenu);
  overlay.addEventListener('click', closeMenu);

  // Tutup saat klik link
  items.forEach(function (link) {
    link.addEventListener('click', closeMenu);
  });
});
</script>

---

5. Penjelasan Animasi

A. Animasi Ikon Hamburger → X

Menggunakan transform dan opacity:

• Garis atas → turun + putar 45°
• Garis tengah → hilang
• Garis bawah → naik + putar -45°

B. Animasi Slide Menu

Menu disembunyikan dengan transform: translateX(-105%), lalu digeser ke translateX(0) saat aktif.

C. Teknik Stagger Otomatis

Setiap item menu diberi transition-delay secara otomatis oleh JavaScript berdasarkan urutannya. Delay diatur 0.1 detik per item, sehingga muncul berurutan dari atas ke bawah.

---

6. Cara Kustomisasi

Yang Ingin Diubah	Lokasi	Contoh
Warna ikon hamburger	CSS → .hm-btn span	background: #fff;
Warna hover link	CSS → .hm-menu ul li a:hover	color: #e63946;
Kecepatan stagger	JS → delayStep	0.1 (bisa diubah 0.05–0.15)
Lebar menu	CSS → .hm-menu	width: 320px;

---

7. Selesai!

Setelah menempelkan ketiga bagian kode di atas, simpan tema dan cek hasilnya di tampilan mobile. Menu hamburger modern dengan animasi slide dan stagger otomatis sudah siap digunakan.

Jika ada pertanyaan atau ingin versi lain (menu dari kanan, full width, tema gelap, dll), silakan tulis di kolom komentar.

Tutorial ini dibuat lengkap dari awal sampai akhir agar mudah diikuti, khususnya untuk pengguna Blogger.

Related Posts