Bật tắt menu hamburger trên thiết bị di động

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 13 trên 27.

Trên màn hình nhỏ, các trang web thường dùng biểu tượng burger (☰) thay vì hiển thị toàn bộ thanh điều hướng. Khi người dùng nhấp vào biểu tượng burger, JavaScript bật hoặc tắt chế độ hiển thị của menu điều hướng.

Trước tiên, hãy tạo cấu trúc HTML cơ bản: một nút có 3 thẻ span (được tạo kiểu thành các đường kẻ bằng CSS để tạo biểu tượng menu hamburger) và một thẻ <nav> ẩn chứa các liên kết trong 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>

Bây giờ, hãy thêm một ít CSS cơ bản để tạo kiểu cho 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;
}

/* Hiển thị thanh điều hướng khi nó không có lớp (class) hidden */
nav:not(.hidden) {
  display: block;
}

Bây giờ, hãy thêm JavaScript để bật tắt menu:

// Chọn nút burger và thanh điều hướng trên thiết bị di động
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Thêm trình lắng nghe sự kiện (event) nhấp chuột cho nút burger
burgerBtn.addEventListener('click', function() {
  // Bật hoặc tắt lớp (class) hidden trên thanh điều hướng di động
  mobileNav.classList.toggle('hidden');
});

Khi bạn nhấp vào nút menu, lớp hidden được bật hoặc tắt trên menu điều hướng, khiến menu xuất hiện hoặc biến mất.

Thử thách

Dễ

Bên trong trình xử lý sự kiện của nút menu, hãy thêm hai dòng code:

Bật hoặc tắt lớp "active" trên nút. Thao tác này sẽ biến ba đường kẻ thành hình chữ “X”.
Bật hoặc tắt lớp "active" trên menu. Thao tác này sẽ làm menu điều hướng xuất hiện hoặc biến mất.

Tự làm thử

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

  <!-- Menu điều hướng -->
  <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>

  <!-- Nội dung chính -->
  <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>