Hướng dẫn responsive menu bootstrap - trình đơn đáp ứng bootstrap

Giới thiệu

Hôm nay mình xin chia sẻ đến các bạn cách tạo menu nhiều cấp (sub-menu) với Bootstrap. Mặc định thì trên bootstrap sẽ kết hợp navbar và dropdown để tạo menu dạng này, nhưng sẽ không tiện khi sử dụng, đồng thời tạo menu đa cấp bằng vòng lặp khi code cũng khá phiền phức. Hiện cũng có khá nhiều thư viện jquery hỗ trợ cho việc này, tuy nhiên mình thấy đa số sử dụng khá phức tạp, đồng thời cũng để mọi người có thêm một lựa chọn.
Hiện cũng có khá nhiều thư viện jquery hỗ trợ cho việc này, tuy nhiên mình thấy đa số sử dụng khá phức tạp, đồng thời cũng để mọi người có thêm một lựa chọn.

Giao diện trên máy tính

Giao diện trên di động

Download

Download: Tại đâyPass giải nén: saigonpixel.vn Tại đây
Pass giải nén: saigonpixel.vn

Đây cũng đang là phiên bản 1.0, nếu trong quá trình sử dụng phát hiện lỗi gì vui lòng để lại bình luận bằng công cụ facebook-comment bên dưới. (Lưu ý là mình sẽ không thảo luận qua Live chat nhé).không thảo luận qua Live chat nhé).

Hướng dẫn sử dụng

Thêm đoạn css sau vào thẻ head

Thêm đoạn javascript sau trước khi đóng thẻ body

Trong đó #navbar là id của element chứa ul menu Vd:
Vd:

Một số tùy biến

desktopsubmenuicon (true/false) Bật tắt việc có hiện icon submenu trên giao diện desktop hay không (true/false)
Bật tắt việc có hiện icon submenu trên giao diện desktop hay không

mobileiconpack (glyphicon / fa) Sử dụng icon từ glyphicon hay font awesome (nếu dùng font awesome thì phải chèn thêm css tương ứng) (glyphicon / fa)
Sử dụng icon từ glyphicon hay font awesome (nếu dùng font awesome thì phải chèn thêm css tương ứng)

mobileopenicon (glyphicon-chevron-down) Icon mở sub-menu trên giao diện di động, tương ứng với mobileiconpack đã dùng phía trên (glyphicon-chevron-down)
Icon mở sub-menu trên giao diện di động, tương ứng với mobileiconpack đã dùng phía trên

mobilecloseicon (glyphicon-chevron-up) Icon đóng sub-menu trên giao diện di động, tương ứng với mobileiconpack đã dùng phía trên (glyphicon-chevron-up)
Icon đóng sub-menu trên giao diện di động, tương ứng với mobileiconpack đã dùng phía trên

Vd:

$("#navbar").btrmenu({
   desktopsubmenuicon: true,
   mobileiconpack: "glyphicon",
   mobileopenicon: "glyphicon-chevron-down",
   mobilecloseicon: "glyphicon-chevron-up",
});