Animasi Menu Hamburger

Ini adalah contoh implementasi menu hamburger modern yang menampilkan interaksi mikro (micro-interaction) secara elegan. Saat diklik, ketiga garis tersebut akan bertransisi dengan mulus membentuk ikon “X”, sehingga memberikan umpan balik visual yang intuitif bagi pengguna.

Kode Implementasi

Animasi interaktif ini dibentuk oleh struktur sederhana perpaduan HTML, CSS, dan JavaScript.

<!-- HTML -->
<button class="hamburger-menu" aria-label="Menu" aria-expanded="false">
  <span class="line line-1"></span>
  <span class="line line-2"></span>
  <span class="line line-3"></span>
</button>

/* CSS */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 48px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.3s ease;
}

.hamburger-menu:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 6px;
  border-radius: 4px;
}

.hamburger-menu:hover {
  transform: scale(1.05);
}

.hamburger-menu .line {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #1e293b;
  border-radius: 9999px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Gaya untuk status aktif (diperluas) */
.hamburger-menu.active .line-1 {
  transform: translateY(14px) rotate(45deg);
  background-color: #ef4444;
}

.hamburger-menu.active .line-2 {
  opacity: 0;
  transform: translateX(-20px);
}

.hamburger-menu.active .line-3 {
  transform: translateY(-14px) rotate(-45deg);
  background-color: #ef4444;
}

// JavaScript
const hamburger = document.querySelector('.hamburger-menu');

hamburger.addEventListener('click', function() {
  // Beralih kelas active
  this.classList.toggle('active');
  
  // Dukungan aksesibilitas (memperbarui aria-expanded)
  const isExpanded = this.classList.contains('active');
  this.setAttribute('aria-expanded', isExpanded);
});

Fitur Utama dan Penjelasan

Animasi Mulus: Penggunaan fungsi easing cubic-bezier menghasilkan gerakan animasi yang terasa alami dan mengalir, jauh dari kesan kaku atau mekanis.
Aksesibilitas (a11y): Atribut aria-label dan aria-expanded disematkan secara tepat agar pembaca layar (screen reader) mampu mengenali status menu—terbuka atau tertutup. Selain itu, :focus-visible diimplementasikan guna mempertegas indikator fokus saat pengguna bernavigasi menggunakan keyboard.
Performa Tinggi: Mengingat animasi ini hanya menggunakan properti transform dan opacity, browser tidak perlu memicu proses pengecatan ulang (repaint/reflow), sehingga performa halaman tetap optimal.