網頁開發 網頁設計

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

梅干 2017/01/10

梅問題-Bootstrap教學-「Bootstrap Navbar導覽列」支援多層下拉選單

  Bootstrap是目前相當主流的RWD Framework,不但內建的網格系統相當好用外,再來就是也整合了許多jQuery套件,滿足所有RWD網頁製作的需求,雖然說Boostrap已內建下拉選單,同時還可將下拉選單整合到導覽列中,但Bootstrap內建的下拉選單,只支援到第二層,因此當有第三層以上時,則是採用隔線的方式來作區隔,主要的原因就在於當多層選單,在手機操控時,則會顯得有些不便,但對於很多朋友來說,二層似乎有點少。


  因此先前梅干也曾分享過,梅干自行用jQuery所開發出的多層選單,來滿足層級較多的朋友,雖然可將那jQuery多層選單整併到Bootstrap中,但在設定與架構上則有些不同,因此最近梅干就花了點時間,研究了一下Bootstrap內建的下拉選單,並加以進行擴充,讓採用內建的架構與下拉選單,也可支援多層的下拉選單,至於要怎麼弄,有需要的朋友,也一塊來看看吧!


Step1
建立好Navbar的html結構後,當有下拉選單時,只需在li加入 class=”dropdown-submenu”,其它的設定與Bootstrap內建的下拉選單一樣。
[html]
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.minwt.com">Minwt</a>
</div>

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">選單1</a></li>
<li class="dropdown-submenu"><a href="#" data-toggle="dropdown" >選單2 </a>
<ul class="dropdown-menu">
<li><a href="#">次選單1</a></li>
<li class="dropdown-submenu"><a href="#" data-toggle="dropdown">次選單2</a>
<ul class="dropdown-menu">
<li><a href="#">次次選單1</a></li>
<li><a href="#">次次選單2</a></li>
<li class="dropdown-submenu"><a href="#" data-toggle="dropdown">次次選單3</a>
<ul class="dropdown-menu">
<li><a href="#">次次次選單1</a></li>
<li><a href="#">次次次選單2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">次選單3</a></li>
</ul>
</li>
<li><a href="#">選單3</a></li>
<li><a href="#">選單4</a></li>
</ul>
</div>
</div>
</div>
[/html]


Step2

接著加入下方的CSS樣式,就會自動產生出,當有子選單時,會出現+號,當開啟子選單時,則會變成-號。
[css]
/* 將子選單加入+號 /
li.dropdown-submenu>a:after{
display:block;
content:"+";
float:right;
font-size: 15px;
margin-top:-1px;
margin-left:5px;
border: solid 1px #ccc;
padding:0 4px;
border-radius: 3px;
}
/
選單開啟時變- /
li.dropdown-submenu.open>a:after{
content:"-";
}
li.open ul.dropdown-menu>li.open>ul.dropdown-menu{
position: relative;
border: 0;
border-radius: 0;
box-shadow: none;
}
li.open ul.dropdown-menu>li.open>ul.dropdown-menu>li{
padding-left: 20px;
}

/ 滑入選單時變換底色 */
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
background: rgba(0,0,0,0.1) !important;
}
[/css]


Step3

再把下方的javascript碼,加到/body結尾前方。
[javascript]
$(function(){
$(‘ul.dropdown-menu [data-toggle=dropdown]’).on(‘click’, function(event) {
//點擊時避免跟隨href位置
event.preventDefault();
//避免在點擊時關閉菜單
event.stopPropagation();
if($(this).parent().hasClass(‘open’) == false){ //當class=open為否時
$(this).parent().addClass(‘open’);
}else{
$(this).parent().removeClass(‘open’);
}
});
});
[/javascript]
Step4

完成後,就會看到當有子選單時,後方就會自動加入+號,當展開時就會變成-號,同時在手機版也能正常的顯示,而目前支援無限層級,因此有需要的朋友也趕快試試看囉!

梅問題-Bootstrap教學-「Bootstrap Navbar導覽列」支援多層下拉選單
[範例預覽]