Bootstrap教學－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名稱，這樣就大功告成啦！

---

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

---

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

---

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