網頁設計, 網頁資源

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

梅干 2017/01/11
梅問題-Bootstrap教學-「Bootstrap Navbar導覽列」支援多層下拉選單
  Bootstrap是目前相當主流的RWD Framework,不但內建的網格系統相當好用外,再來就是也整合了許多jQuery套件,滿足所有RWD網頁製作的需求,雖然說Boostrap已內建下拉選單,同時還可將下拉選單整合到導覽列中,但Bootstrap內建的下拉選單,只支援到第二層,因此當有第三層以上時,則是採用隔線的方式來作區隔,主要的原因就在於當多層選單,在手機操控時,則會顯得有些不便,但對於很多朋友來說,二層似乎有點少。
  因此先前梅干也曾分享過,梅干自行用jQuery所開發出的多層選單,來滿足層級較多的朋友,雖然可將那jQuery多層選單整併到Bootstrap中,但在設定與架構上則有些不同,因此最近梅干就花了點時間,研究了一下Bootstrap內建的下拉選單,並加以進行擴充,讓採用內建的架構與下拉選單,也可支援多層的下拉選單,至於要怎麼弄,有需要的朋友,也一塊來看看吧!
Step1
建立好Navbar的html結構後,當有下拉選單時,只需在li加入 class="dropdown-submenu",其它的設定與Bootstrap內建的下拉選單一樣。
<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="https://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>

Step2
接著加入下方的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;
}

Step3
再把下方的javascript碼,加到/body結尾前方。
$(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');
        }
    });
});

Step4
完成後,就會看到當有子選單時,後方就會自動加入+號,當展開時就會變成-號,同時在手機版也能正常的顯示,而目前支援無限層級,因此有需要的朋友也趕快試試看囉!
梅問題-Bootstrap教學-「Bootstrap Navbar導覽列」支援多層下拉選單
[範例預覽]