Tombol menu burger di perangkat seluler

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 13 dari 27.

Di layar kecil, situs web sering menggunakan ikon burger (☰) alih-alih menampilkan navigasi lengkap. Saat pengguna mengeklik ikon burger, JavaScript mengubah visibilitas menu navigasi.

Pertama, buat struktur HTML dasar: sebuah tombol dengan 3 span (ditata sebagai garis di CSS untuk membentuk ikon burger) dan <nav> tersembunyi yang berisi tautan menu.

<button id="burger-btn" class="burger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<nav id="mobile-nav" class="hidden">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Sekarang, mari tambahkan CSS dasar untuk menata menu burger:

.burger-menu {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

.hidden {
  display: none;
}

/* Tampilkan navigasi saat tidak memiliki class hidden */
nav:not(.hidden) {
  display: block;
}

Sekarang, tambahkan JavaScript untuk mengubah tampilan menu:

// Pilih tombol burger dan navigasi seluler
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Tambahkan event listener klik ke tombol burger
burgerBtn.addEventListener('click', function() {
  // Aktifkan atau nonaktifkan class hidden pada navigasi seluler
  mobileNav.classList.toggle('hidden');
});

Ketika kamu mengeklik tombol burger, class hidden ditambahkan atau dihapus pada menu navigasi, sehingga menu tersebut muncul atau menghilang.

Tantangan

Mudah

Di dalam event listener untuk tombol burger, tambahkan dua baris kode:

Alihkan class "active" pada tombol. Ini akan menganimasikan tiga garis menjadi “X”.
Alihkan class "active" pada menu. Ini akan membuat menu navigasi muncul dan menghilang.

Coba sendiri

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Tombol Burger -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- Menu Navigasi -->
  <nav id="myMenu" class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Philosophy</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Konten Utama -->
  <header class="hero">
    <h1>Minimalism</h1>
    <p>Less but better. Enjoy the essentials, remove the noise.</p>
    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80" alt="Minimalist interior">
  </header>

  <section class="content">
    <h2>The Essence of Minimalism</h2>
    <p>
      Minimalism is not about having less, but about making room for what truly matters. 
      It is about quality over quantity, clarity over clutter, and creating spaces that breathe. 
      Whether in design or lifestyle, minimalism helps us live with purpose and appreciation.
    </p>
  </section>

  <script src="script.js"></script>
</body>
</html>