網頁開發 網頁設計

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

2017/02/05

梅問題-Boostrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

  Bootstrap內建的Nav導覽列選單,不但會自動切換選單模式,甚至還可以設定選單是置頂還是置底,相當的方便,完全不用寫任何的CSS與Javascript,但選單的展開方式只有一種,就是由上到下,當選單太長時,在顯示上則會有些不便,這時將選單變成由左右二側滑出,有它的方便之處,所以先前梅干也曾分享過左右的滑出選單。


  但那選單無論桌機還手機版,都是隱藏在側邊,因此今天要來分享另一種作法,讓Bootstrap Nav導覽列選單,在桌機版選單則在上方顯示,當變為手機版時,選單就由左或右滑出,這對於多層選單的朋友來說,在手機版下就更加方便操控,至於要怎麼做現在砫一塊來看看吧!


Step1
加入下方的CSS
[css]
@media screen and (max-width: 768px) {
/left/
.side-collapse-container-left{
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container-left.out{
left:70%;
}
.side-collapse-left {
top:50px;
bottom:0;
left:0;
width:70%;
position:fixed;
overflow:hidden;
ransition:width .4s;
}
.side-collapse-left.in {
width:0;
}

/right/
.side-collapse-container-right{
position:relative;
right:0;
transition:right .4s;
}
.side-collapse-container-right.out{
right:70%;
}

.side-collapse-right {
top:50px;
bottom:0;
right:0;
width:70%;
position:fixed;
overflow:hidden;
transition:width .4s;
}
.side-collapse-right.in {
width:0;
}
}
[/css]


Step2
加入下方的javascript。
[javascript]
$(function(){
var sideslider = $(‘[data-toggle=collapse-side]’);
var get_sidebar = sideslider.attr(‘data-target-sidebar’);
var get_content = sideslider.attr(‘data-target-content’);
sideslider.click(function(event){
$(get_sidebar).toggleClass(‘in’);
$(get_content).toggleClass(‘out’);
});
});
[/javascript]
Step3
接著產生Bootstrap內建的Navbar選單,分別在button的紅色與藍色地方,加上選單與內容的class名稱,這樣就大功告成啦!
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button data-toggle="collapse-side" data-target-sidebar=".side-collapse-right" data-target-content=".side-collapse-container-right" type="button" class="navbar-toggle pull-rihgt">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">梅問題教學網</a>
</div>
<div class="navbar-inverse side-collapse-right in">
  <nav role="navigation" class="navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">選單1</a></li>
      <li><a href="#">選單2</a></li>
      <li><a href="#">選單3</a></li>
    </ul>
  </nav>
</div>
</div>
</nav>

<div class="container side-collapse-container-right">
……
</div>


Step4
當在手機版時,點右上的選單鈕,選單就會由右向左滑開。
梅問題-Boostrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟
Step5
若要改為則左側的話,分別將.side-collapse-right->.side-collapse-left、side-collapse-container-right->side-collapse-container-left,這樣就可以啦!有需要的朋友,也趕快試試看囉!
梅問題-Boostrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

[範例預覽-右] | [範例預覽-左]