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.

Project name

Home
About
- About sub 1
- About sub 2
  - About sub 2-1
  - About sub 2-2
  - About sub 2-3
    - About sub 2-3-1
    - About sub 2-3-2
    - About sub 2-3-3
    - About sub 2-3-4
  - About sub 2-4
- About sub 3
- About sub 4
Contact

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",
}];

Giới thiệu

Một số tùy biến

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề