Hướng dẫn tạo menu đa cấp trên bootstrap

Lần trước bản thân gồm reviews giải pháp làm cho menu đa cấp bởi WordPress trong bài Tự code menu nhiều cấp đến themes WordPress, có khá nhiều chúng ta nhắn tin hỏi vậy tiếng kiến thiết HTML menu nhiều cấp cho như thế nào cho tương xứng, thì bây giờ mình sẽ viết bài xích này để lời giải thắc mắc của chúng ta. Mình đang sử dụng Bootstrap nhằm kiến tạo nkhô hanh rộng.

Bạn đang xem: Hướng dẫn tạo menu đa cấp trên bootstrap

Kết nối cùng với tlỗi viện Bootstrap

Đầu tiên bạn cần kết nối CSS cùng JS của Bootstrap vào tệp tin HTML. Nếu bạn chưa biết về Bootstrap có thể coi tại đây: Thiết kế hình ảnh website cùng với bootstraps.

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

Tạo menu đa cấp cho với Bootstrap đối kháng giản

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


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

với position: relative; sẽ làm cho thẻ li cất submenu thay đổi một bộ phận bà mẹ. Phía bên dưới bản thân đã định hình địa điểm mang đến lớp con theo phần tử chị em với top:0 ngang hàng, left:100% nằm hoàn toàn về bên bắt buộc, margin-top: -1px không quan trọng đặc biệt lắm, mình chỉ cho các thẻ li trong các số đó thụt xuống tí.

Xem thêm: Hướng Dẫn Cách Cài Nhạc Chuông Cho Iphone Bằng Itunes Đơn Giản, Nhanh Chóng

Tiếp theo bạn phải sử dụng một đoạn script để bắt hành động xẩy ra Lúc clichồng vào.


*
Đây là hiệu quả thực đơn đa cung cấp có thiết kế bởi bootstrap đơn giản nhất


Tạo menu đa cấp cho Responsive với Bootstrap

Ở trên là 1 trong những phương pháp để chế tác menu đa cấp, mặc dù kia chỉ là 1 menu solo, nếu muốn tạo nên một thực đơn nhiều cung cấp các bạn buộc phải tạo nên một menu hoàng chỉnh gồm thể Responsive sầu theo form size màng hình. Bootstrap hỗ trợ tốt nhất câu hỏi này.

Thiết kế HTML cho thực đơn đa cấp


Menu bên trên bản thân thi công khá đầy đủ yếu tố của một menu chuẩn chỉnh, bạn có thể trí tuệ sáng tạo thêm. quý khách cũng có thể thêm đoạn css sau vào để điều phối mẫu ibé nó cù phía tương xứng bên trên màng hình đồ vật tính

Bổ sung đồ họa và thêm hành vi mang đến menu đa cấp


truyền thông (min-width: 767px) .navbar-nav .dropdown-thực đơn .caret transform: rotate(-90deg);Cuối thuộc các bạn thêm đoạn JS này vào nữa để triển khai hành động đến đoạn cấp 2 trsinh hoạt lên.

Xem thêm: Bác Sĩ Hướng Dẫn Trị Nấm Da Đầu ? Nấm Da Đầu, Điều Trị Sao Cho Hiệu Quả

$(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à dưới đây là kết quả.


Chuyên mục: Kiến Thức