Menu thả xuống

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

Menu thả xuống (dropdown menu) là thành phần giao diện người dùng (UI component) hiển thị thêm tùy chọn khi được kích hoạt. Menu này thường được dùng trong phần điều hướng để sắp xếp nội dung mà không chiếm quá nhiều không gian.

Đầu tiên, hãy tạo cấu trúc HTML cho một danh sách thả xuống cơ bản:

<div class="dropdown">
  <button class="dropdown-toggle">Menu</button>
  <div class="dropdown-menu">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Giờ, hãy thêm JavaScript để bật hoặc tắt chế độ hiển thị của danh sách thả xuống:

// Lấy nút bật tắt menu thả xuống
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Lấy menu thả xuống
const dropdownMenu = document.querySelector('.dropdown-menu');

// Thêm trình lắng nghe sự kiện nhấp chuột vào nút bật tắt
dropdownToggle.addEventListener('click', function() {
  // Bật hoặc tắt lớp 'show' trên menu thả xuống
  dropdownMenu.classList.toggle('show');
});

Cuối cùng, thêm một ít CSS cơ bản để ẩn hoặc hiện menu thả xuống:

.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

Khi bạn nhấp vào nút "Menu", menu thả xuống sẽ xuất hiện. Nhấp vào nút đó lần nữa sẽ ẩn menu.

Thử thách

Dễ

Tạo menu thả xuống hiển thị hoặc ẩn khi bạn nhấp vào nút.

Các bước:

Trong HTML:
- Thêm thuộc tính onclick vào nút để gọi hàm có tên toggleDropdown khi được nhấp
Trong JavaScript:
- Tạo hàm có tên toggleDropdown
- Bên trong hàm, bật hoặc tắt lớp "show" trên phần tử có ID “myDropdown”

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Save the Forests</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Save the Forests</h1>
    <p>Even planting one or two trees makes a difference.</p>
  </header>

  <div class="dropdown">
    <button class="dropbtn">Learn More ▼</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Why forests matter</a>
      <a href="#">How to grow a tree</a>
      <a href="#">Community projects</a>
    </div>
  </div>

  <main>
    <section>
      <h2>Why Trees Are Important</h2>
      <p>
        Forests clean our air, give us oxygen, and are home to countless animals.  
        Each tree you plant helps fight climate change and supports life on Earth.
      </p>
    </section>
    <section>
      <h2> Start Small</h2>
      <p>
        Don’t wait for a big change. Start with just one or two trees in your yard or community.  
        Your small action inspires others!
      </p>
    </section>
  </main>

  <footer>
    <p> Together we can make the planet greener.</p>
  </footer>

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