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

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

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Lookup-ID一鍵取得Facebook個人臉書、社團、粉絲頁的ID

Lookup-ID一鍵取得Facebook個人臉書、社團、粉絲頁的ID





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    kate 說道:

    很棒的教學。
    不過發現開與關都只能點擊選單鈕,想請問在選單展開之後,可以點擊畫面上任一區塊關閉選單嗎?

近期講座

近期講座

更多講座