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

Cập nhật lần cuối: 20 Tháng Sáu 2017

8,651 Lượt xem

Lần trước mình có giới thiệu cách làm menu đa cấp bằng WordPress trong bài Tự code menu đa cấp cho themes WordPress, có nhiều bạn nhắn tin hỏi vậy giờ thiết kế HTML menu đa cấp như thế nào cho phù hợp, thì hôm nay mình sẽ viết bài này để giải đáp thắc mắc của các bạn. Mình sẽ sử dụng Bootstrap để thiết kế nhanh hơn.

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

Đầu tiên bạn cần kết nối CSS và JS của Bootstrap trong file HTML. Nếu bạn chưa biết về Bootstrap có thể xem tại đây: Thiết kế giao diện website với bootstraps.

Nếu không bạn có thể sử dụng thư viện trực tuyến của Bootstrap như sau. Lưu ý là trước khi import thư viện JS của Bootstrap bạn phải import jquery (bạn cũng có thể tải về hoặc dùng trực tuyến như dưới đây.

Tạo menu đa cấp với Bootstrap đơn giản

Bây giờ trong phần body bạn tạo ra một cấu trúc như sau

   Danh mục
   
   

     
HTML
     
CSS
     

         Ngôn ngữ lập trình 
         

            
C#
            
PHP
            

              Ngôn ngữ khác 
              

                  
Java
                  
Python
              
            
          
      
   
 

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

với position: relative; sẽ làm cho thẻ li chứa submenu trở thành một phần tử mẹ. Phía dưới mình sẽ định hình vị trí cho lớp con theo phần tử mẹ với top:0 ngang hàng, left:100% nằm hoàn toàn về bên phải, margin-top: -1px không quan trọng lắm, mình chỉ cho các thẻ li trong đó thụt xuống tí.

Tiếp theo bạn cần sử dụng một đoạn script để bắt hành động xảy ra khi click vào.

Đây là kết quả menu đa cấp được thiết kế bằng bootstrap đơn giản nhất

Tạo menu đa cấp Responsive với Bootstrap

Ở trên là một cách để tạo menu đa cấp, tuy nhiên đó chỉ là một menu đơn, nếu muốn tạo ra một menu đa cấp bạn phải tạo ra một menu hoàng chỉnh có thể Responsive theo kích thước màng hình. Bootstrap hỗ trợ rất tốt việc này.

Thiết kế HTML cho menu đa cấp

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