Bootstrap萬用無限階層下拉選單

梅干又針對 Bootstrap 的 Nav 發文，這次是將只支援二層，改到當有第三層後，都可以順著點按開關開閤區塊，相當的方便，特別筆記一下。

原文：Bootstrap教學－Bootstrap 導覽選單再進化，支援無限階層子選單

Step1
首先，將下方的CSS樣式，加到網頁中。

ol,
    ul {
      list-style: none;
    }
    ul.nav>li {
      position: relative;
    }
    ul.nav>li a:hover {
      text-decoration: none;
      background: #efefef; /*滑入選單底色*/
    }
    ul.nav>li ul>li{
      border-left: solid 1px #ccc;/*選單側邊線顏色*/
    }
    ul.nav>li>ul>li a{
      color: #333;/*選單連結顏色*/
      display: block;
      padding-top: 10px;
      padding-bottom: 10px;
      text-decoration:none;
    }
    ul.nav>li ul>li {border-bottom: solid 1px #ccc;} /*選單隔線顏色*/
    ul.nav>li ul>li:last-child{border-bottom:0;}
    ul.nav>li>ul li>ul.sub-menu {border-top: solid 1px #ccc;}/*子選單隔線顏色*/
    ul.nav>li>ul.sub-menu li>ul.sub-menu{display:none;}
    ul.nav>li ul {padding-left:20px;}/*階層式向後退的像素*/
    ul.nav>li ul>li>a:before{
      font-family: 'FontAwesome';
      content: '\f105';
      padding-right:7px;
      padding-left:7px;
      font-size:10px;
    }
    /*桌機*/
    @media(min-width:768px) {
      ul>li>a>b.arrow:after {
        font-family: 'FontAwesome';
        content: '\f078';
        font-size: 12px;
        position: absolute;
        right: 0;
      }
      ul>li>ul>li>a>b.arrow:after {
        font-family: 'FontAwesome';
        content: '\f078';
        font-size: 15px;
        position: absolute;
        top:0;
        right: 0;
        padding:10px 15px;
      }
      ul>li>ul>li>a>b.on:after {
        font-family: 'FontAwesome';
        content: '\f00d';
      }
      ul.nav>li:hover>a+ul {
        visibility: visible;
        opacity: 1;
      }
      ul.nav>li>ul.sub-menu {
        position: absolute;
        top: 50px;
        left: 0;
        z-index: 9999;
        background: #fff;
        width: 20vw;
        text-align: left;
        border-left: solid 1px #ededed;
        border-bottom: solid 1px #ededed;
        border-right: solid 1px #ededed;
        box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all .5s;
        transition: all .5s;
      }
    }
    /*手機*/
    @media(max-width:768px) {
      b.arrow:after {
        font-family: 'FontAwesome';
        content: '\f078';
        position: absolute;
        top: 3px;
        right: 0;
        padding: 10px 20px 10px 40px;
      }
 
      a.dropdown+ul {
        display: none;
      }
      b.on:after {
        font-family: 'FontAwesome';
        content: '\f00d';
      }
      ul.nav>li>a {border-bottom: solid 2px #ccc;}/*選單隔線顏色*/
      ul.nav>li:last-child>a {border-bottom: 0;}      
      ul.nav>li>ul.sub-menu {
        border-bottom: solid 2px #ccc;/*子選單隔線顏色*/
      }
    }

100

101

ol,

ul {

list-style: none;

}

ul.nav>li {

position: relative;

}

ul.nav>li a:hover {

text-decoration: none;

background: #efefef; /*滑入選單底色*/

}

ul.nav>li ul>li{

border-left: solid 1px #ccc;/*選單側邊線顏色*/

}

ul.nav>li>ul>li a{

color: #333;/*選單連結顏色*/

display: block;

padding-top: 10px;

padding-bottom: 10px;

text-decoration:none;

}

ul.nav>li ul>li {border-bottom: solid 1px #ccc;} /*選單隔線顏色*/

ul.nav>li ul>li:last-child{border-bottom:0;}

ul.nav>li>ul li>ul.sub-menu {border-top: solid 1px #ccc;}/*子選單隔線顏色*/

ul.nav>li>ul.sub-menu li>ul.sub-menu{display:none;}

ul.nav>li ul {padding-left:20px;}/*階層式向後退的像素*/

ul.nav>li ul>li>a:before{

font-family: 'FontAwesome';

content: '\f105';

padding-right:7px;

padding-left:7px;

font-size:10px;

}

/*桌機*/

@media(min-width:768px) {

ul>li>a>b.arrow:after {

font-family: 'FontAwesome';

content: '\f078';

font-size: 12px;

position: absolute;

right: 0;

}

ul>li>ul>li>a>b.arrow:after {

font-family: 'FontAwesome';

content: '\f078';

font-size: 15px;

position: absolute;

top:0;

right: 0;

padding:10px 15px;

}

ul>li>ul>li>a>b.on:after {

font-family: 'FontAwesome';

content: '\f00d';

}

ul.nav>li:hover>a+ul {

visibility: visible;

opacity: 1;

}

ul.nav>li>ul.sub-menu {

position: absolute;

top: 50px;

left: 0;

z-index: 9999;

background: #fff;

width: 20vw;

text-align: left;

border-left: solid 1px #ededed;

border-bottom: solid 1px #ededed;

border-right: solid 1px #ededed;

box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.3);

opacity: 0;

visibility: hidden;

-webkit-transition: all .5s;

transition: all .5s;

}

/*手機*/

@media(max-width:768px) {

b.arrow:after {

font-family: 'FontAwesome';

content: '\f078';

position: absolute;

top: 3px;

right: 0;

padding: 10px 20px 10px 40px;

}

a.dropdown+ul {

display: none;

}

b.on:after {

font-family: 'FontAwesome';

content: '\f00d';

}

ul.nav>li>a {border-bottom: solid 2px #ccc;}/*選單隔線顏色*/

ul.nav>li:last-child>a {border-bottom: 0;}

ul.nav>li>ul.sub-menu {

border-bottom: solid 2px #ccc;/*子選單隔線顏色*/

}

Step2
接著再把下方的javascript，放到jQeury套件的下方。

$(function () {
      var DROPDOWN = 'dropdown'
      var ON = 'on'
      var SLIDETOGGLE_SPEED = 'slow'
      var ARROW = '<b class="arrow"></b>'
      var $nav = $('ul.nav')
      $nav.find('li>ul').prev().addClass(DROPDOWN).append(ARROW)
      $nav.find('li>a>b').click(function (event) {
        event.preventDefault();
        $(this).toggleClass(ON);
        $(this).parent().next().slideToggle(SLIDETOGGLE_SPEED);
      });
 
      $(window).resize(function () {
        if($(window).width()>768){
          $nav.find('li a b').removeClass(ON);
          $nav.find('.sub-menu').css('display', '');
        }
      });
    });

$(function () {

var DROPDOWN = 'dropdown'

var ON = 'on'

var SLIDETOGGLE_SPEED = 'slow'

var ARROW = '<b class="arrow"></b>'

var $nav = $('ul.nav')

$nav.find('li>ul').prev().addClass(DROPDOWN).append(ARROW)

$nav.find('li>a>b').click(function (event) {

event.preventDefault();

$(this).toggleClass(ON);

$(this).parent().next().slideToggle(SLIDETOGGLE_SPEED);

});

$(window).resize(function () {

if($(window).width()>768){

$nav.find('li a b').removeClass(ON);

$nav.find('.sub-menu').css('display', '');

}

});

Step3
再產生Bootstrap Nav導覽列的基本架構。

<nav id="nav">
    <div class="navbar navbar-default">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            .....選單.......
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
    </div>
  </nav>

</button>

</div>

.....選單.......

</ul>

</div>

</div>

</nav>

Step4
接著下拉選單的結構很簡單，當要子層時，只需在ul標籤中加入sub-menu，以及下方加入li，就可變成子選單，因此只需重覆此方法，就可作出層級的下拉式選單啦！

<li><a href="https://www.minwt.com">選單1</a>
  <ul class="sub-menu">
    <li><a href="https://www.minwt.com">選單1-1</a></li>
    <li><a href="https://www.minwt.com">選單1-2</a></li>
    <li><a href="https://www.minwt.com">選單1-3</a></li>
  </ul>
</li>

</ul>

</li>

Step5
都完成後，第一層選單是滑入展開，當第二層開始有子選單時，點後方的箭頭則會展開選單，點前方的連結時，則會開始該連結網址，是不是變得更簡單，更好操控啦！因此有在用Bootstrap的朋友，不妨也可試試看，如有任何問題也歡迎討論。

實際操作

See the Pen Bootstrap萬用無限階層下拉選單 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

資料來源

Bootstrap教學－Bootstrap 導覽選單再進化，支援無限階層子選單

標籤雲

實際操作

資料來源