Việc tạo ra các menu khác nhau một cách sáng tạo đôi khi khá khó khăn khi bạn không có bất kỳ ý tưởng hay cảm hứng nào. Nhưng loại vấn đề này có thể được khắc phục bằng cách tìm kiếm thiết kế menu đầy cảm hứng khác hoặc với sự trợ giúp của các công cụ. Trong vấn đề này, jQuery.Mmenu xuất hiện như một công cụ khá tiện dụng.

jQuery.Mmenu là một plugin jQuery dễ sử dụng để tạo menu điều hướng trượt ứng dụng dành cho thiết bị di động trong trang web của bạn. Menu sáng tạo bóng bẩy này sẽ mang lại trải nghiệm người dùng đẹp hơn và tinh tế hơn.

Bắt đầu

Để bắt đầu với jQuery.Mmenu, hãy truy cập trang tải xuống và plugin sẽ được tải xuống tự động. Trong bài đăng này, chúng tôi sẽ cố gắng xây dựng một menu cơ bản.

Cũng giống như các plugin jQuery khác, để sử dụng plugin này, bạn phải bao gồm các phụ thuộc bắt buộc vào trang web của mình. Những người đang có jQuery, jquery.mmenu.jsjquery.mmenu.css. Đoạn mã như sau:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

Và điều đó là đủ để tạo một menu cơ bản với tất cả các chức năng và kiểu dáng. Trên các tính năng bổ sung và nâng cao hơn, bạn cần phải bao gồm tệp JS và CSS bổ sung.

Tạo ra một Menu

Hãy tạo menu cơ bản như bạn thường tạo với nav, ul, lia các yếu tố. Trong bản trình diễn này, chúng tôi sẽ tạo một menu ngang có ba menu phụ và ba menu phụ phụ, giống như vậy.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

Trong menu trên, chúng tôi đã bao gồm nav với id menu sẽ được sử dụng làm tham chiếu hàm jQuery.mmenu. Sau đó gọi cho plugin với javascript chức năng và bao gồm id như vậy.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

Trong thẻ LI, bạn có thể thấy một lớp có tên Selected, lớp này hữu ích để tạo menu được chọn mặc định khi khởi tạo. Bạn cũng có thể thêm lớp của riêng mình (ví dụ: active), nhưng hãy đảm bảo bao gồm nó trong phần cấu hình, như vậy.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

Plugin này đã tự động thêm các liên kết đóng và mở menu phụ, vì vậy chúng ta không cần tạo chúng. Thực đơn của chúng tôi sẽ trông như thế này.

Sự kết luận

jQuery.mmenu cung cấp cho bạn một giải pháp tuyệt vời để tạo các menu khác nhau dễ dàng nhất có thể. Bạn thậm chí có thể tạo các yếu tố tương tác khác mà plugin này, ví dụ, bạn có thể tạo chú giải công cụ trượt và thanh thông báo cho trang web dành cho thiết bị di động.

jQuery.Mmenu cũng có thể được tùy chỉnh để sử dụng trước. Ví dụ: bạn có thể tạo danh sách liên hệ giống như điện thoại di động trong trang web của mình bằng cách kết hợp phần mở rộng chủ đề, phần bổ trợ (nhãn, bộ đếm, tiêu đề, dragOpen và trường tìm kiếm) và định vị của nó.

Nếu bạn tìm thấy bài báo Tạo menu trượt dễ dàng bằng jQuery.mmenu hữu ích, hãy chia sẻ nó với bạn bè của bạn. Hẹn gặp lại các bạn trong những bài viết tiếp theo. Theo dõi driveria.net để nhận được các bản cập nhật mới nhất!