Thiết kế menu đa cấp với HTML, CSS và Jquery

Trong thiết kế website, menu đa cấp (hay còn gọi là dropdown menu) là một phần không thể thiếu. Menu đa cấp cho phép người dùng dễ dàng truy cập đến các trang con trong một nhóm chức năng cụ thể. Trong bài viết này, chúng ta sẽ tìm hiểu cách thiết kế menu đa cấp với HTML, CSS và Jquery.

Bước 1: HTML

Đầu tiên, hãy tạo ra cấu trúc HTML cho menu đa cấp của chúng ta. Sử dụng thẻ <ul> và <li> để tạo ra danh sách các mục trong menu, và sử dụng thẻ <a> để định nghĩa liên kết cho mỗi mục. Các mục cha sẽ chứa các mục con trong một thẻ <ul> con.

<nav>
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li>
      <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="#">Liên hệ</a></li>
  </ul>
</nav>

Bước 2: CSS

Tiếp theo, chúng ta sẽ thiết lập CSS cho menu đa cấp của mình. Chúng ta sẽ sử dụng CSS để định dạng các mục trong menu và ẩn các mục con cho đến khi người dùng nhấp vào các mục cha.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

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

nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  padding: 0;
}

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

nav li ul li {
  display: block;
  width: 100%;
}

nav li ul li a {
  padding: 10px;
}

Trong ví dụ này, thẻ <nav> được sử dụng để đóng gói menu, và menu được xác định bằng cách sử dụng thẻ <ul> và <li>. Các mục con được định nghĩa bằng cách thêm một thẻ <ul> và <li> bên trong mục cha. Trong CSS, các thuộc tính được sử dụng để hiển thị và ẩn các mục con khi người dùng tương tác với menu.

Bước 3: Jquery

Cuối cùng, chúng ta sẽ sử dụng Jquery để thêm sự kiện click cho các mục cha. Khi người dùng nhấp vào các mục cha, chúng ta sẽ sử dụng hàm slideToggle() để ẩn hoặc hiển thị các mục con.

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

Trong ví dụ này, hàm $(document).ready() được sử dụng để đảm bảo rằng code jQuery chỉ chạy khi tất cả các phần tử đã được tải hoàn toàn. Sự kiện click được kích hoạt khi người dùng nhấp vào mục cha. Hàm slideToggle() được sử dụng để ẩn hoặc hiển thị các mục con khi người dùng nhấp vào mục cha.

Lưu ý rằng để sử dụng jQuery, bạn cần phải thêm nó vào trang của mình bằng cách sử dụng thẻ <script>. Bạn có thể sử dụng CDN của jQuery hoặc tải xuống tệp jQuery và lưu trữ nó trên máy chủ của mình. Dưới đây là ví dụ về cách sử dụng CDN của jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Đảm bảo đặt thẻ <script> trước khi kết thúc thẻ <body> của bạn.

HTML, CSS, JavaScript, jQuery

Thiết kế menu đa cấp với HTML, CSS và Jquery

Trả lời Hủy