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

Quý Khách sẽ xem: NEW Hướng Dẫn Tạo Menu Đa Cấp Bằng Jquery, Hướng Dẫn Tạo Menu Đa Cấp Trên Bootstrap Tại AZ Pet

Lần trước mình tất cả giới thiệu cách tạo ra menu nhiều cấp cho bởi WordPress trong nội dung bài viết Tự mã hóa menu nhiều cấp cho cho chủ thể WordPress, có không ít bạn nhắn tin hỏi bản thân phương pháp thiết kế menu đa cung cấp HTML cho cân xứng, lúc này mình viết bài xích này nhằm trả lời câu hỏi của chúng ta. Tôi vẫn thực hiện Bootstrap nhằm xây đắp nhanh hao rộng.

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

Bạn đã xem: Tạo menu nhiều cấp cho với jquery

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

Trước hết, bạn phải liên kết CSS cùng JS của Bootstrap trong tệp HTML. Nếu chúng ta chưa quen thuộc với Bootstrap, bạn có thể coi tại đây: Thiết kế bối cảnh trang web bởi Bootstraps.

Hình như, chúng ta cũng có thể áp dụng thỏng viện trực tuyến đường của Bootstrap nlỗi sau. Lưu ý rằng trước lúc nhập thỏng viện JS của Bootstrap, bạn phải nhập jquery (chúng ta cũng có thể cài về hoặc sử dụng trực tuyến đường nhỏng dưới.

Tạo menu những cung cấp cùng với Bootstrap đơn giản

Bây giờ trong phần thân, các bạn chế tạo một cấu tạo như vậy này

Sau đó, bạn phải thêm một số CSS

với chức vụ: chúng ta hàng; đang làm cho thẻ li cất menu nhỏ biến hóa 1 phần tử bà bầu. Dưới đây tôi vẫn xác định lớp bé dựa trên phần tử mẹ bao gồm top: 0 trên cùng một trang, left: 100% thanh lịch yêu cầu, margin-top: -1px không quan trọng đặc biệt lắm, tôi chỉ chỉ dẫn những thẻ li trong các số đó nó khá thụt vào.

Xem thêm: ▷ Máy Đánh Giày Shiny Chính Hãng Phân Phối Độc Quyền, ▷ Máy Đánh Giày Shiny Chính Hãng

Sau kia, bạn cần sử dụng một tập lệnh nhằm đánh dấu hành động xảy ra khi chúng ta nhấp vào nó.

Đây là hiệu quả của menu nhiều cấp cho đơn giản dễ dàng tuyệt nhất có thiết kế bởi vì bootstrap

Tạo menu đa cấp đáp ứng với Bootstrap

Trên đấy là cách chế tạo ra menu nhiều cung cấp tuy nhiên nó chỉ là 1 thực đơn độc nhất vô nhị, muốn tạo menu nhiều cấp cho bạn phải sản xuất thực đơn tương đối đầy đủ hoàn toàn có thể đáp ứng phụ thuộc vào độ lớn của màn hình. Bootstrap cung cấp nó tốt nhất có thể.

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

Menu bên trên được thiết kế với với không hề thiếu những yếu tắc của một thực đơn tiêu chuẩn, chúng ta có thể thỏa mức độ sáng tạo. quý khách cũng hoàn toàn có thể thêm css sau nhằm điều hướng hình tượng đến hướng phù hợp bên trên màn hình

Thêm đồ họa với hành động vào thực đơn nhiều cấp

media (min-width: 767px) .navbar-nav .dropdown-thực đơn .caret phát triển thành đổi: xoay (-90deg); Cuối cùng thêm JS này để thực hiện hành vi cho đoạn văn cung cấp 2 trnghỉ ngơi lên.

$ (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.offsetTop, “left”: $ parent.outerWidth () – 4); $ (“. nav li.open”). not ($ ( this). parent (“li”)). removeClass (“open”); return false;);); Đây là kết quả.