文章彙整

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

By Astral Web 2 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

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

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

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。