Hướng dẫn Bootstrap responsive menu với sub-menu

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.

bootstrap menu responsive on desktop
Giao diện trên máy tính

bootstrap menu responsive on mobile
Giao diện trên di động

Download

Download: 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é).

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

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

<link href="/dist/css/btr-menu.css" rel="stylesheet" />

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/Theme/js/btr-menu.js"></script>
<script>
    $(document).ready(function () {
        $("#navbar").btrmenu();
    });
</script>

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

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="http://getbootstrap.com/examples/starter-template/#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a>
            <ul>
                <li><a href="#">About sub 1</a></li>
                <li><a href="#">About sub 2</a>
                    <ul>
                        <li><a href="#">About sub 2-1</a></li>
                        <li><a href="#">About sub 2-2</a></li>
                        <li><a href="#">About sub 2-3</a>
                            <ul>
                                <li><a href="#">About sub 2-3-1</a></li>
                                <li><a href="#">About sub 2-3-2</a></li>
                                <li><a href="#">About sub 2-3-3</a></li>
                                <li><a href="#">About sub 2-3-4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About sub 2-4</a></li>
                    </ul>
                </li>
                <li><a href="#">About sub 3</a></li>
                <li><a href="#">About sub 4</a></li>
            </ul>
            </li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

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

 

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
icon menu con

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)

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

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

Vd:

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