Hướng dẫn tạo menu đa cấp trên Bootstrap

Hướng dẫn tạo menu đa cấp trên Bootstrap

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.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

<div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Danh mục
   <span class="caret"></span></button>
   <ul class="dropdown-menu">
     <li><a tabindex="-1" href="#">HTML</a></li>
     <li><a tabindex="-1" href="#">CSS</a></li>
     <li class="dropdown-submenu">
         <a class="test" tabindex="-1" href="#">Ngôn ngữ lập trình <span class="caret"></span></a>
         <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">C#</a></li>
            <li><a tabindex="-1" href="#">PHP</a></li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Ngôn ngữ khác <span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="#">Java</a></li>
                  <li><a href="#">Python</a></li>
              </ul>
            </li>
          </ul>
      </li>
   </ul>
 </div>

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

<style>
.dropdown-submenu {
 position: relative;
}

.dropdown-submenu .dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -1px;
}
</style>

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.

<script>
   $(document).ready(function(){
      $('.dropdown-submenu a.test').on("click", function(e){
         $(this).next('ul').toggle();
         e.stopPropagation();
         e.preventDefault();
         });
      });
</script>
Đây là kết quả menu đa cấp được thiết kế bằng bootstrap

Đâ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

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">LOGO</a>
      </div>
 
      <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">Trang chủ</a></li>
            <li><a href="#" target="_blank">Giới thiệu</a></li>
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu cấp 1 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                   <li><a href="#">Menu 1.1</a></li>
                   <li class="divider"></li>
                   <li><a href="#">Menu 1.1</a></li>
                   <li class="divider"></li>
                   <li>
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1.1 <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                          <li><a href="#">Menu 1.2</a></li>
                          <li>
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1.2 <b class="caret"></b></a>
                              <ul class="dropdown-menu">
                                 <li>
                                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1.3 <b class="caret"></b></a>
                                     <ul class="dropdown-menu">
                                        <li><a href="#">Menu 1.4</a></li>
                                     </ul>
                                 </li>
                              </ul>
                           </li>
                       </ul>
                   </li>
               </ul>
           </li>
        </ul>
    </div>
  </div>
</div>

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 desktop

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

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

Các bài liên quan

Tuấn ĐC

Tuấn ĐC

Tôi thích tự do, làm những gì mình thích, thích đi nhiều nơi và học được nhiều thứ.

Liên hết bài viết: ""