簡單究好 Simple is Best

網頁前端開發資訊

bootstrap-submenu:讓Bootstrap下拉選單支援多層次選單(Bootstrap3 & Bootstrap4)

Bootstrap 3 和 Bootstrap 4 的下拉選單,只支援到第二層,如果需要多層次選單的話,我們需要用到 bootstrap-submenu.js ( https://vsn4ik.github.io/bootstrap-submenu/ )
其中Bootstrap 3 要搭配 Bootstrap-submenu 2使用,Bootstrap4 則是要搭配 Bootstrap-submenu 3 使用。

Bootstrap 3 + Bootstrap-submenu 2

https://codepen.io/ellen-shih/pen/rNNwggz

使用小技巧:載入必要的CSS和JS之後,使用$(toggle-btn).submenupicker();套用Bootstrap-submenu。$(toggle-btn)是指第一層觸發的按鈕或連結。在bootstrap-submenu.js的官方範例之中,是在第一層的按鈕上加上data-submenu,所以套用的方法就會寫成 $(‘[data-submenu]’).submenupicker(); 接著第二層以下要觸發子選單的連結則不需要加上任何特別的設定。

Step 1: 載入必要的CSS和JS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/2.0.4/css/bootstrap-submenu.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/2.0.4/js/bootstrap-submenu.js"></script>
Step 2: Html
原生的Bootstrap Dropdown
<div class="dropdown">
  <button class="btn btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
加上Submenu之後
<div class="dropdown">
  <button class="btn btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-submenu>
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Submenu
      </a>
      <ul class="dropdown-menu" >
        <li><a href="#">Sub Action</a></li>
        <li><a href="#">Sub Another action</a></li>
        <li><a href="#">Sub Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Sub Separated link</a></li>
      </ul>
    </li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

應用在選單上

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="###" data-toggle="dropdown">
      Item Lv0<span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Item Lv1</a></li>
      <li><a href="#">Item Lv1</a></li>
      <li><a href="#">Item Lv1</a></li>
      <li><a href="#">Item Lv1</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" data-submenu>
      Item Lv0<span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a href="#">Item Lv1</a>
        <ul class="dropdown-menu">
          <li><a href="#">Item Lv2</a></li>
          <li><a href="#">Item Lv2</a></li>
          <li><a href="#">Item Lv2</a></li>
          <li class="dropdown-submenu">
            <a href="#">Item Lv2</a>
            <ul class="dropdown-menu">
              <li><a href="#">Item Lv3</a></li>
              <li><a href="#">Item Lv3</a></li>
              <li><a href="#">Item Lv3</a></li>
              <li class="dropdown-submenu">
                <a href="#">Item Lv3</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Item Lv4</a></li>
                  <li><a href="#">Item Lv4</a></li>
                  <li><a href="#">Item Lv4</a></li>
                  <li><a href="#">Item Lv4</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Item Lv1</a></li>
      <li><a href="#">Item Lv1</a></li>
    </ul>
  </li>
  <li><a href="#">Item Lv0</a></li>
  <li><a href="#">Item Lv0</a></li>
</ul>
Step 3: 設定submenu
<script type="text/javascript">
$(function() {
  $('[data-submenu]').submenupicker();
});
</script>

Bootstrap 4 + Bootstrap-submenu 3

Step 1: 載入必要的CSS和JS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/3.0.1/css/bootstrap-submenu.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/3.0.1/js/bootstrap-submenu.js"></script>
Step 2: Html
原生的Bootstrap 4 Dropdown
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
加上Submenu之後
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu>
    Dropdown
    </button>
    <div class="dropdown-menu">
        <div class="dropdown dropright dropdown-submenu">
            <button class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown">Action</button>
            <div class="dropdown-menu">
                <button class="dropdown-item" type="button">Sub action</button>
                <div class="dropdown dropright dropdown-submenu">
                    <button class="dropdown-item dropdown-toggle" type="button">Another sub action</button>
                    <div class="dropdown-menu">
                        <button class="dropdown-item" type="button">Sub action</button>
                        <button class="dropdown-item" type="button">Another sub action</button>
                        <button class="dropdown-item" type="button">Something else here</button>
                    </div>
                </div>
                <button class="dropdown-item" type="button">Something else here</button>
                <button class="dropdown-item" type="button" disabled>Disabled action</button>
                <div class="dropdown dropright dropdown-submenu">
                    <button class="dropdown-item dropdown-toggle" type="button">Another action</button>
                    <div class="dropdown-menu">
                        <button class="dropdown-item" type="button">Sub action</button>
                        <button class="dropdown-item" type="button">Another sub action</button>
                        <button class="dropdown-item" type="button">Something else here</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="dropdown-header">Dropdown header</div>
        <div class="dropdown dropright dropdown-submenu">
            <button class="dropdown-item dropdown-toggle" type="button">Another action</button>
            <div class="dropdown-menu">
                <button class="dropdown-item" type="button">Sub action</button>
                <button class="dropdown-item" type="button">Another sub action</button>
                <button class="dropdown-item" type="button">Something else here</button>
            </div>
        </div>
        <button class="dropdown-item" type="button">Something else here</button>
        <div class="dropdown-divider"></div>
        <button class="dropdown-item" type="button">Separated link</button>
    </div>
</div>
次選單向左展開
<div class="dropdown float-right">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu>
    Dropdown
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <div class="dropdown dropleft dropdown-submenu">
            <button class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown">Action</button>
            <div class="dropdown-menu">
                <button class="dropdown-item" type="button">Sub action</button>
                <div class="dropdown dropleft dropdown-submenu">
                    <button class="dropdown-item dropdown-toggle" type="button">Another sub action</button>
                    <div class="dropdown-menu">
                        <button class="dropdown-item" type="button">Sub action</button>
                        <button class="dropdown-item" type="button">Another sub action</button>
                        <button class="dropdown-item" type="button">Something else here</button>
                    </div>
                </div>
                <button class="dropdown-item" type="button">Something else here</button>
                <button class="dropdown-item" type="button" disabled>Disabled action</button>
                <div class="dropdown dropleft dropdown-submenu">
                    <button class="dropdown-item dropdown-toggle" type="button">Another action</button>
                    <div class="dropdown-menu">
                        <button class="dropdown-item" type="button">Sub action</button>
                        <button class="dropdown-item" type="button">Another sub action</button>
                        <button class="dropdown-item" type="button">Something else here</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="dropdown-header">Dropdown header</div>
        <div class="dropdown dropleft dropdown-submenu">
            <button class="dropdown-item dropdown-toggle" type="button">Another action</button>
            <div class="dropdown-menu">
                <button class="dropdown-item" type="button">Sub action</button>
                <button class="dropdown-item" type="button">Another sub action</button>
                <button class="dropdown-item" type="button">Something else here</button>
            </div>
        </div>
        <button class="dropdown-item" type="button">Something else here</button>
        <div class="dropdown-divider"></div>
        <button class="dropdown-item" type="button">Separated link</button>
    </div>
</div>
Step 3: 設定submenu
<script type="text/javascript">
$(function() {
  $('[data-submenu]').submenupicker();
});
</script>

Bootstrap 4 Navbar+ Bootstrap-submenu 3

Bootstrap3 Navbar是使用巢狀的<ul/>標籤,但是在Bootstrap4 Navbar 則是直接拿Bootstrap Dropdown來套用。個人還是比較習慣用巢狀<ul/>,如果您也跟我一樣,可以參考底下的範例。
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li>
            <div class="dropdown-divider"></div>
          </li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-submenu>
          Multi-level Lv0
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown dropright dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Multi-level Lv1</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Multi-level Lv2</a></li>
              <li class="dropdown dropright dropdown-submenu">
                <a class="dropdown-item dropdown-toggle" href="javascript:void(0)">Multi-level Lv2</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Multi-level Lv3</a></li>
                  <li><a class="dropdown-item" href="#">Multi-level Lv3</a></li>
                  <li class="dropdown dropright dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="javascript:void(0)">Multi-level Lv3</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Multi-level Lv4</a></li>
                      <li><a class="dropdown-item" href="#">Multi-level Lv4</a></li>
                      <li><a class="dropdown-item" href="#">Multi-level Lv4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a class="dropdown-item" href="#">Multi-level Lv2</a></li>
            </ul>
          </li>
          <li><a class="dropdown-item" href="#">Multi-level Lv1</a></li>
          <li><a class="dropdown-item" href="#">Multi-level Lv1</a></li>
        </ul>
      </li>
    </ul>
  </nav>
Bootstrap-submenu 3在手機上會跑版,所以我們要在加上底下的CSS。
.container {
  margin-bottom: 300px;
}


@media (max-width: 767.98px) {
  [x-placement^=bottom-],
[x-placement^=top-] {
    top: 100% !important;
    bottom: auto !important;
    transform: none !important;
  }
  [x-placement^=bottom-] .dropdown-submenu .dropdown-menu,
[x-placement^=top-] .dropdown-submenu .dropdown-menu {
    margin-top: 0;
    margin-bottom: 0;
    left: 0;
    right: 0;
    margin-left: -1px;
    margin-right: -1px;
    top: 100%;
    bottom: auto;
  }


  .dropdown-submenu .dropdown-item:focus {
    outline: none;
  }


  .dropdown-submenu.dropright .dropdown-toggle::after {
    transform: rotate(90deg);
  }


  .dropdown-toggle.on::after {
    transform: rotate(180deg);
  }
  .dropdown-submenu .dropdown-toggle.on::after {
    transform: rotate(270deg);
  }


  .navbar-nav {
    width: 100%;
  }
  .navbar-nav .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar-nav .dropdown-item {
    padding: 0.25rem 0.25rem;
  }
  .navbar-nav .dropdown-menu {
    border: none;
    margin-top: 0;
    padding-top: 0;
  }
  .navbar-nav .dropdown-menu .dropdown-menu {
    margin-left: 1rem;
    margin-top: 0;
  }
  .navbar-nav .dropdown.show .dropdown-submenu.dropright .dropdown-toggle::after {
    margin-right: 12px;
  }
  .navbar-nav .dropdown-submenu .dropdown-menu {
    border: none;
  }
}
再加上一些javascript來調整按下之後的箭頭方向
<script type="text/javascript">
$(function () {
  $("[data-submenu]").submenupicker();
  $(".dropdown-toggle").on("click", function () {
    $(this).toggleClass("on");
  });

  $(".dropdown").on("hide.bs.dropdown", function () {
    $(".dropdown-toggle").removeClass("on");
  });

  $(document).on("keypress", "input", function (e) {
    var code = e.keyCode || e.which;
    if (code == 27) {
      $(".dropdown-toggle").removeClass("on");
    }
  });
});
</script>
您可以在codepen 找到上面文章的示範
Bootstrap 3 + Bootstrap-submenu 2 ( https://codepen.io/ellen-shih/pen/rNNwggz )
Bootstrap 4 + Bootstrap-submenu 3 ( https://codepen.io/ellen-shih/pen/KKKXXyj )
又或者是到bootstrap-submenu官網尋找更新範例 (https://vsn4ik.github.io/bootstrap-submenu/)

Post a comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *