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