前端開發：讓你的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，也訂閱電子報，就不會錯過最新的知識分享囉！有相關問題，歡迎隨時與我們聯繫。
我要留言