文章彙整

前端開發:讓你的Bootstrap4下拉選單支援多層次選單

Astral WebBy Astral Web 2 months agoNo Comments
首頁  /  網站技術與設計  /  前端開發  /  前端開發:讓你的Bootstrap4下拉選單支援多層次選單

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

今天這篇文章主要是分享Bootstrap 4 + Bootstrap-submenu 3的作法,關於Bootstrap 3 + Bootstrap-submenu 2 的作法,你可以參考我們的舊文章:讓你的Bootstrap下拉選單可以支援多層選單

 

Bootstrap 4 + Bootstrap-submenu 3 ( https://codepen.io/ellen-shih/pen/KKKXXyj )

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來調整按下之後的箭頭方向

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

您可以在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/)

 

Bootstrap 4 + Bootstrap-submenu 3的作法都學起來了嗎~希望以上的分享對各位讀者們都能有所幫助,喜歡歐斯瑞文章的讀者們,記得追蹤我們的Facebook粉絲團Instagram,也訂閱電子報,就不會錯過最新的知識分享囉!有相關問題,歡迎隨時與我們聯繫

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  前端開發網站技術與設計

留下回應

你的電子郵件地址不會被公開.