Truyện Hoang Dung

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.

Giao diện trên máy tính

Giao diện trên di động

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>

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

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