Hướng Dẫn Tạo Menu Đa Cấp Với Jquery Css

Bạn vẫn xem: NEW hướng Dẫn tạo nên Menu Đa Cấp bởi Jquery, hướng Dẫn tạo nên Menu Đa cấp Trên Bootstrap trên AZ Pet

Lần trước bản thân có trình làng cách tạo thành menu nhiều cấp bằng WordPress trong bài viết Tự mã hóa thực đơn đa cung cấp cho chủ thể WordPress, có khá nhiều bạn nhắn tin hỏi mình cách xây đắp menu đa cấp cho HTML mang đến phù hợp, lúc này mình viết bài này để trả lời câu hỏi của bạn. Tôi sẽ áp dụng Bootstrap để xây đắp nhanh hơn.

Bạn đang xem: Hướng dẫn tạo menu đa cấp với jquery css

Bạn vẫn xem: tạo thành menu nhiều cấp cùng với jquery

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

Trước tiên, các bạn cần kết nối CSS và JS của Bootstrap trong tệp HTML. Nếu bạn chưa thân quen với Bootstrap, bạn cũng có thể xem tại đây: xây cất giao diện website bằng Bootstraps.

Ngoài ra, bạn có thể sử dụng thư viện trực con đường của Bootstrap như sau. Lưu ý rằng trước khi nhập thư viện JS của Bootstrap, bạn cần nhập jquery (bạn cũng có thể tải về hoặc thực hiện trực đường như mặt dưới.

Tạo menu nhiều cấp với Bootstrap solo giản

Bây giờ đồng hồ trong phần thân, bạn tạo một cấu trúc như cố kỉnh này

Sau đó, bạn cần thêm một số CSS

với chức vụ: họ hàng; sẽ tạo cho thẻ li chứa menu nhỏ trở thành một phần tử mẹ. Sau đây tôi sẽ xác định lớp nhỏ dựa trên bộ phận mẹ tất cả top: 0 trên và một trang, left: 100% thanh lịch phải, margin-top: -1px không đặc trưng lắm, tôi chỉ đưa ra các thẻ li trong đó nó tương đối thụt vào.

Xem thêm: Pso2 Guide 2020 - Cộng Đồng Steam::Freedom Fighters

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

Đây là hiệu quả của menu đa cấp dễ dàng nhất có phong cách thiết kế bởi bootstrap

Tạo menu nhiều cấp đáp ứng nhu cầu với Bootstrap

Trên đấy là cách tạo ra menu nhiều cấp tuy nhiên nó chỉ là 1 trong những menu duy nhất, ao ước tạo menu các cấp bạn cần tạo menu đầy đủ hoàn toàn có thể đáp ứng tùy theo độ to của màn hình. Bootstrap hỗ trợ nó khôn xiết tốt.

Thiết kế HTML mang đến menu nhiều cấp

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

Thêm bối cảnh và hành vi vào menu những cấp

media (min-width: 767px) .navbar-nav .dropdown-menu .caret biến đổi: xoay (-90deg); ở đầu cuối thêm JS này nhằm thực hiện hành động cho đoạn văn cung cấp 2 trở 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ả.