17. ví dụ về xây dựng menu dropdown – Lập trình JavaScript

Dưới đây là một ví dụ về cách xây dựng một menu dropdown đơn giản bằng HTML, CSS và lập trình JavaScript:

HTML:

html

<nav>
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Danh mục</a>
      <ul class="dropdown-menu">
        <li><a href="#">Danh mục 1</a></li>
        <li><a href="#">Danh mục 2</a></li>
        <li><a href="#">Danh mục 3</a></li>
      </ul>
    </li>
    <li><a href="#">Giới thiệu</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</nav>

CSS:

css

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline-block;
  position: relative;
}

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

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f1f1f1;
  padding: 0;
  border: 1px solid #ccc;
}

.dropdown-menu li {
  display: block;
}

nav li:hover .dropdown-menu {
  display: block;
}

JavaScript:

javascript

// Bỏ phần tử dropdown-menu khi click bên ngoài menu
document.addEventListener("click", function(event) {
  const dropdowns = document.getElementsByClassName("dropdown-menu");
  for (const dropdown of dropdowns) {
    if (!dropdown.contains(event.target)) {
      dropdown.style.display = "none";
    }
  }
});

// Hiển thị dropdown-menu khi click vào danh mục có dropdown
const menuItems = document.querySelectorAll("nav li");
menuItems.forEach(function(item) {
  const hasDropdown = item.querySelector(".dropdown-menu");
  if (hasDropdown) {
    item.addEventListener("click", function() {
      const dropdownMenu = this.querySelector(".dropdown-menu");
      if (dropdownMenu.style.display === "block") {
        dropdownMenu.style.display = "none";
      } else {
        dropdownMenu.style.display = "block";
      }
    });
  }
});

Trong ví dụ trên, chúng ta đã tạo một menu dọc với một danh mục có menu dropdown. Khi người dùng di chuột qua danh mục có dropdown, menu dropdown sẽ xuất hiện. Nếu người dùng nhấp chuột bên ngoài menu, menu dropdown sẽ ẩn đi.