Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Làm Dropdown Menu dễ dàng bằng Javascript

@devnavMar 24, 20213 min read...

Để bắt đầu mình sẽ tạo một danh sách các menu item nhé:

<div class="wrapper">
  <div class="content">
    <p>🔥 Dropdown Menu 😁</p>
  </div>
  <div class="sidebar">
    <ul class="navbar">
      <li>
        <a class="navbar-link" href="#">
          <span><i class="far fa-chart-bar"></i>Dashboard</span></a>
      </li>
      <li>
        <a class="navbar-link" href="#">
          <span><i class="fas fa-h-square"></i> Home</span></a>
      </li>
      <li>
        <div class="navbar-link">
          <span class="btn-dropdown">
            <i class="fas fa-box-open"></i>Categories
          </span>
          <ul>
            <li><a href="#">Add Categories</a></li>
            <li><a href="#">Edit Categories</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a class="navbar-link" href="#">
          <span><i class="fas fa-funnel-dollar"></i>Earning</span></a>
      </li>
      <li>
        <div class="navbar-link">
          <span class="btn-dropdown">
            <i class="far fa-list-alt"></i>Manage Course
          </span>
          <ul>
            <li><a href="#">Add Course</a></li>
            <li><a href="#">Edit Course</a></li>
          </ul>
          </a>
      </li>
    </ul>
  </div>
</div>

Mỗi Dropdown mình sẽ tạo một class btn-dropdown để xử lí nút click vào list item sẽ sổ xuống.

Ta chuyển đến phần JavaScript 😁:

Đầu tiên ta sẽ lấy tất cả các list dropdown có class dropdown và các button click.

const links = document.querySelectorAll('.navbar-link .btn-dropdown');
const dropdown = document.querySelectorAll('.navbar-link ul');

Bình thường chúng ta sẽ làm theo cách kiểm tra điều kiện khi click vào thì list sẽ xuất hiện tương đương với display:block, khi chưa click thì display: none.

Cách này vẫn hoạt động tốt tuy nhiên transition sẽ không hoạt động.

Vậy nên chúng ta sẽ xử lí nó theo cách khác:

👉 Đầu tiên chúng ta sẽ tìm height của list, và cho list này di chuyển lên khoảng cách chính bằng height.

const dropdown = document.querySelectorAll('.navbar-link ul');

dropdown.forEach((element) => {
  const height = element.offsetHeight;
  element.style.marginTop = `${-height}px`;
})

Bên CSS mình đã ẩn list này đi và thêm transition:

ul{
  opacity: 0;
  visibility: hidden;
  transition: margin 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

Tiếp theo, ta sẽ add event cho từng button click bằng cách sau:

const links = document.querySelectorAll('.navbar-link .btn-dropdown');
links.forEach((link) => {
  link.addEventListener('click', function (e) {
    ...
  });
});

Tiếp theo mình sẽ xử lí add hoặc remove class active và dropdown cho từng phần tử tương ứng khi click vào button.

active là class Thêm background cho button.

dropdown:

ul.dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 0 !important;
}

links.forEach((link) => {
  link.addEventListener('click', function (e) {
    const target = e.currentTarget;
    const ele = target.nextElementSibling;

    target.classList.toggle('active');
    ele.classList.toggle('dropdown');
  });
});

Đến đây vẫn chưa thực sự thành công, mình muốn remove các class active và dropdown của từng button và list đi sau khi ta click vào mỗi button.

links.forEach((link) => {
  link.addEventListener('click', function (e) {
    const target = e.currentTarget;
    const ele = target.nextElementSibling;

    dropdown.forEach((element) => {
      if (element !== ele) {
        element.previousElementSibling.classList.remove('active');
        element.classList.remove('dropdown');
      }
    });
    target.classList.toggle('active');
    ele.classList.toggle('dropdown');
  });
});

Mình thêm điều kiện khi click vào sẽ remove tất cả các class bên dưới nếu phần tử trong list khác với phần tử ta vừa click vào.

Chúng ta sẽ được kết quả như bên dưới:

🖐 Như vậy là chúng ta đã hoàn thành xong Dropdown menu rồi. Hy vọng các bạn sẽ hiểu và thực hành thành công.

Happy coding 😄