Làm menu đa cấp với bootstrap

     

Lần trước bản thân gồm ra mắt biện pháp làm menu nhiều cung cấp bằng WordPress trong bài Tự code thực đơn đa cung cấp đến themes WordPress, có khá nhiều bạn nhắn tin hỏi vậy tiếng xây cất HTML menu đa cấp như thế nào mang lại phù hợp, thì lúc này mình đang viết bài này nhằm lời giải vướng mắc của các bạn. Mình sẽ sử dụng Bootstrap để thiết kế nhanh rộng.

Bạn đang xem: Làm menu đa cấp với bootstrap

Kết nối với thư viện Bootstrap

Trước tiên các bạn cần liên kết CSS cùng JS của Bootstrap vào file HTML. Nếu các bạn chưa chắc chắn về Bootstrap có thể xem tại đây: Thiết kế hình ảnh trang web với bootstraps.

Nếu ko bạn có thể áp dụng thỏng viện trực tuyến của Bootstrap như sau. Lưu ý là trước khi import tlỗi viện JS của Bootstrap chúng ta đề nghị import jquery (chúng ta có thể sở hữu về hoặc cần sử dụng trực con đường nhỏng sau đây.

Tạo thực đơn đa cung cấp với Bootstrap solo giản

Bây giờ đồng hồ vào phần toàn thân bạn tạo ra một kết cấu như sau


Tiếp theo bạn phải thêm một chút ít CSS nữa

với position: relative; đã tạo nên thẻ li đựng submenu thay đổi một thành phần bà bầu. Phía bên dưới bản thân đang định hình địa điểm mang đến lớp con theo bộ phận người mẹ cùng với top:0 ngang sản phẩm, left:100% nằm trọn vẹn trở về bên cạnh yêu cầu, margin-top: -1px không đặc trưng lắm, tôi chỉ cho những thẻ li trong các số ấy thụt xuống tí.

Xem thêm: Full Cách Tăng Điểm 3 Đường Đao, Bổng, Quyền Thiếu Lâm Vltk1

Tiếp theo bạn phải áp dụng một đoạn script nhằm bắt hành vi xảy ra lúc cliông xã vào.


*
Đây là hiệu quả menu nhiều cung cấp được thiết kế bởi bootstrap đơn giản nhất


Tạo thực đơn đa cung cấp Responsive sầu với Bootstrap

Tại bên trên là 1 trong những cách để tạo ra menu đa cung cấp, mặc dù kia chỉ là 1 thực đơn solo, nếu muốn tạo thành một thực đơn đa cấp chúng ta yêu cầu tạo thành một menu hoàng chỉnh tất cả thể Responsive theo kích cỡ màng hình. Bootstrap cung ứng tốt nhất có thể vấn đề này.

Thiết kế HTML cho thực đơn nhiều cấp


Menu trên mình kiến thiết tương đối đầy đủ yếu tố của một thực đơn chuẩn, bạn cũng có thể sáng tạo thêm. Bạn cũng rất có thể thêm đoạn css sau vào để điều hướng dòng ibé nó tảo phía phù hợp trên màng hình thứ tính

Bổ sung đồ họa với thêm hành vi mang lại thực đơn nhiều cấp


truyền thông (min-width: 767px) .navbar-nav .dropdown-thực đơn .caret transform: rotate(-90deg);Cuối thuộc chúng ta thêm đoạn JS này vào nữa nhằm thực hiện hành động mang lại đoạn cấp 2 trở lên.

Xem thêm: Giới Hạn Vàng Trong Liên Quân Mobile, Hé Lộ Phiên Bản Mới: Cập Nhật Cách Nhận Vàng

$(document).ready(function() $(".navbar a.dropdown-toggle").on("click", function(e) var $el = $(this); var $parent = $(this).offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass("open"); if(!$parent.parent().hasClass("nav")) $el.next().css("top": $el<0>.offsetTop, "left": $parent.outerWidth() - 4); $(".nav li.open").not($(this).parents("li")).removeClass("open"); return false; ););Và bên dưới đây là công dụng.


Chuyên mục: Công nghệ