文章彙整

讓你的Bootstrap下拉選單可以支援多層選單

Astral WebBy Astral Web 6 years agoNo Comments
首頁  /  網站技術與設計  /  前端開發  /  讓你的Bootstrap下拉選單可以支援多層選單

Bootstrap submenu

Bootstrap 3.x 的下拉選單只支援到第二層、如果您需要多層選單的話、可以試試加上底下這支 bootstrap-submenu.js

 

Step 1: 載入必要的CSS和JS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-submenu.min.css">

<script src="https://code.jquery.com/jquery-3.1.1.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
<script src="dist/js/bootstrap-submenu.min.js" defer></script>

Step 2: HTML

<ul class="nav navbar-nav">
  <li><a href="#">連結</a></li>
  <li><a href="#">連結</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"  data-submenu>下拉選單 <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">第二層連結</a></li>
      <li class="dropdown-submenu">
        <a href="#">第二層連結有子選單</a>
        <ul class="dropdown-menu">
          <li><a href="#">第三層連結</a></li>
          <li><a href="#">第三層連結</a></li>
          <li class="dropdown-submenu">
            <a href="#">第三層連結有子選單</a>
            <ul class="dropdown-menu">
              <li><a href="#">第四層連結</a></li>
              <li class="dropdown-submenu">
                <a href="#">第四層連結有子選單</a>
                <ul class="dropdown-menu">
                  <li><a href="#">第五層連結</a></li>
                  <li><a href="#">第五層連結</a></li>
                  <li><a href="#">第五層連結</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">第五層連結</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">第五層連結</a></li>
                </ul>
              </li>
              <li><a href="#">第四層連結</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">第四層連結</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">第四層連結</a></li>
            </ul>
          </li>
          <li role="separator" class="divider"></li>
          <li><a href="#">第三層連結</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">第三層連結</a></li>
        </ul>
      </li>
      <li><a href="#">第二層連結</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">第二層連結</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">第二層連結</a></li>
    </ul>
  </li>
</ul>

在第一層下拉選單的<a>標籤加上data-submenu,有子選單的<li>標籤加上  class=”dropdown-submenu”。

Step 3: 啟用bootstrap-submenu

<script type="text/javascript">
  $(function() {
    $('[data-submenu]').submenupicker();
  });
</script>


現在您的Bootstrap下拉選單已經可以支援多層選單了。如果您需要更多範例可以參考
bootstrap-submenu

 

 000

歐斯瑞

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

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

立即聯繫我們

推薦文章

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

留下回應

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