Tạo một menu đơn giản và hiển thị dropdown menu khi click vào các mục

jQuery

Dưới đây là code tham khảo Tạo một menu đơn giản và hiển thị dropdown menu khi click vào các mục với HTML, CSS và jQuery

HTML

<nav>
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li class="dropdown">
      <a href="#">Sản phẩm</a>
      <ul>
        <li><a href="#">Sản phẩm 1</a></li>
        <li><a href="#">Sản phẩm 2</a></li>
        <li><a href="#">Sản phẩm 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

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

nav li {
  display: inline-block;
}

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

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

nav ul li:hover > ul {
  display: inherit;
}

nav ul ul li {
  width: 200px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 200px;
}

jQuery

$(document).ready(function() {
  $('nav li').click(function() {
    $(this).find('ul').slideToggle();
  });
});

Giải thích:

  • HTML: Tạo một menu đơn giản với các mục và một dropdown menu bên trong mục “Sản phẩm”.
  • CSS: Thiết lập các kiểu dáng cho menu và dropdown menu.
  • JavaScript:
    • Sử dụng phương thức click để bắt sự kiện click vào một mục.
    • Sử dụng phương thức find để tìm dropdown menu trong mục đó và sử dụng phương thức slideToggle để hiển thị hoặc ẩn dropdown menu khi click vào mục.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *