網頁設計, 網頁資源

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

梅干2017/08/25
梅問題-Bootstrap教學-Bootstrap Navbar無限階層式導覽列下拉選單
  使用Bootstrap時間愈久,也愈來愈習慣他的架構與寫作方法,透過Bootstrap快速的開發出RWD自適應的網頁,在設計RWD自適應的網頁中,下拉選單絕對是必要的,雖然Bootstrap內建就有導覽列選單,但他的下拉選單,只支援二層,因此當有第三層時,就只能用分隔線將選單分隔開來,雖然是一種方式,但有時候只有二層實在有點不太方便。
  因此如此所以先前梅干,也曾修改過Bootstap內建導覽列選單,讓它支援多層選單,在一般的靜態頁面沒有什麼太大問題,但要套入WordPress時,就相當的麻煩,得在某些指定的標籤內,加入相關的設定,才能實現多層下拉選單,因此這問題也困擾了梅干許久,所以前幾天梅干就花了快二天的時間,直接打造一個多層級的下拉式選單,為了更符合使用習慣,所以在桌機是滑入展開,點前方的選單名稱,則會開啟該選單連結,進到手機版時,則是點右邊的箭頭展開選單,點前方的選單名稱一樣也是開啟連結,而主架構還是Bootstrap Navbar,但在選單中,就有所調整,讓選單更單純,更好套用,因此有在使用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;/*子選單隔線顏色*/}
}

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', '');
}
});
});

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>

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>

Step5
都完成後,第一層選單是滑入展開,當第二層開始有子選單時,點後方的箭頭則會展開選單,點前方的連結時,則會開始該連結網址,是不是變得更簡單,更好操控啦!因此有在用Bootstrap的朋友,不妨也可試試看,如有任何問題也歡迎討論。梅問題-Bootstrap教學-Bootstrap Navbar無限階層式導覽列下拉選單
範例預覽
UAG軍規iPhone防摔殼