Hướng dẫn menu đa cấp bootstrap

Tiếp theo bạn cần thêm một chút CSS nữa

LOGO

Menu trên mình thiết kế đầy đủ thành phần của một menu chuẩn, bạn có thể sáng tạo thêm. Bạn cũng có thể thêm đoạn css sau vào để điều hướng cái icon nó quay hướng phù hợp trên màng hình máy tính

Bổ sung giao diện và thêm hành động cho menu đa cấp

@media [min-width: 767px] {
   .navbar-nav .dropdown-menu .caret { transform: rotate[-90deg];}
}

Cuối cùng bạn thêm đoạn JS này vào nữa để thực hiện hành động cho đoạn 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[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ả.

Kết quả menu hiển thị trên màng hình desktop

Kết quả menu hiển thị trên màng hình di động