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

一直以來都覺得Bootstrap的導覽列 (Navbar)只有一種響應模式很可惜
而且我更喜歡的是從側邊滑出的方式呈現(Bootstrap4據說已經內建了側邊滑出的方式..但我沒找到=_=")
於是找了網路上的一些教學
梅問題教學網的這個方法應該是改動最少的方式
而且保留了在PC上原本的模式
個人最滿意這個版本
特別紀錄一下～

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

當在手機版時，點右上的選單鈕，選單就會由右向左滑開。

---

Step5

若要改為則左側的話，分別將.side-collapse-right->.side-collapse-left、side-collapse-container-right->side-collapse-container-left，這樣就可以啦！有需要的朋友，也趕快試試看囉！

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

後記：
這兩個範例比起來我比較喜換右邊的非滿版形式
不過有點可惜的是並沒有提供點選空白處選單會收回的功能....
可惜了。

轉載自梅問題教學網
網址：https://www.minwt.com/webdesign-dev/html/17114.html