網頁設計, 網頁資源

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

2017/02/06
梅問題-Boostrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟
  Bootstrap內建的Nav導覽列選單,不但會自動切換選單模式,甚至還可以設定選單是置頂還是置底,相當的方便,完全不用寫任何的CSS與Javascript,但選單的展開方式只有一種,就是由上到下,當選單太長時,在顯示上則會有些不便,這時將選單變成由左右二側滑出,有它的方便之處,所以先前梅干也曾分享過左右的滑出選單。
  但那選單無論桌機還手機版,都是隱藏在側邊,因此今天要來分享另一種作法,讓Bootstrap Nav導覽列選單,在桌機版選單則在上方顯示,當變為手機版時,選單就由左或右滑出,這對於多層選單的朋友來說,在手機版下就更加方便操控,至於要怎麼做現在砫一塊來看看吧!
Step1
加入下方的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;
   }
 }

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

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導覽列選單在手機版下,選單由側邊開啟
[範例預覽-右] | [範例預覽-左]