Menu thả xuống

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 20 trên 35.

Menu thả xuống là một mục điều hướng hiển thị thêm liên kết khi người dùng di chuột qua hoặc đặt tiêu điểm vào đó. Bạn có thể tạo menu thả xuống bằng JavaScript, nhưng trong chương này, chúng ta sẽ tập trung vào cách chỉ dùng CSS, sử dụng :hover hoặc :focus-within để hiện menu ẩn.

Tại sao nên dùng chúng:

Tiết kiệm không gian trên thanh điều hướng.
Giúp giao diện gọn gàng và ngăn nắp.
Hoạt động tốt với thiết kế ưu tiên thiết bị di động và thiết kế tương thích nhiều kích thước màn hình khi được điều chỉnh phù hợp.

HTML:

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

CSS:

//The .dropdown is position: relative 
//so the dropdown content can be positioned correctly with position: absolute.
.dropdown {
  position: relative;
  display: inline-block;
}

//The .dropdown-content is hidden by default using display: none.
.dropdown-content {
  display: none;
  position: absolute;
}

//When the user hovers over the .dropdown container, 
//the .dropdown-content is shown using display: block.
.dropdown:hover .dropdown-content {
  display: block;
}

Với đoạn code này, khi bạn di chuột qua vùng chứa danh sách thả xuống (bao gồm cả nút), nội dung trong danh sách sẽ xuất hiện.

Thử thách

Dễ

Bạn được cung cấp HTML cho một menu thả xuống có nút mang nhãn "Select Color" và ba lựa chọn: Red, Green, Blue.

Nhiệm vụ của bạn là dùng CSS để định kiểu menu thả xuống sao cho:

Các lựa chọn được ẩn theo mặc định.
Các lựa chọn hiện ra khi người dùng di chuột qua vùng chứa menu thả xuống.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown menu</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 50px;
      background-color: #f0f0f0;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: 1px solid #333;
      border-radius: 5px;
      background-color: #ffffff;
    }

    .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #ffffff;
      min-width: 160px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }

    .dropdown-content a:hover {
      background-color: #f2f2f2;
    }

    /* Show dropdown on hover or focus */
    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {

    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="dropdown-button">Select Color</button>
    <div class="dropdown-content">
      <a href="#">Red</a>
      <a href="#">Green</a>
      <a href="#">Blue</a>
    </div>
  </div>

</body>
</html>