本身動手寫一個側導航欄組件

github倉庫地址：https://github.com/meidongwei...

在當前這個大移動時代，咱們寫的網頁愈來愈注重手機端的適配，這得益於 CSS3 的媒體查詢，我也是在工做中有這樣的需求，要對移動端友好，理所固然，我就想到了響應式設計，今天說的這個側導航欄組件就是其中一角。

側導航欄在移動端會隱藏，顯示一個觸發按鈕，點擊按鈕，打開側導航欄，再點擊關閉。
其實這個效果實現起來很簡單，咱們能夠使用 css 控制側導航欄位置，讓它 left: -x(負值會將側導航藍控制在屏幕外), 而後點擊按鈕觸 left: x（讓它回到屏幕內），就是這麼簡單～

這個 demo 是由 bootstrap 的樣式模版改變而來

html:

<div class="row-offcanvas">
    <div class="sidebar-offcanvas">
        側導航
    </div>
    <div>
        主要內容
    </div>
</div>

css:

.row-offcanvas,
   {
    position: relative;
    transition: all .25s ease-out;
    left: 0;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    left: -50%;
  }
  .row-offcanvas.active {
    left: 50%;
  }

js:(js使用了jQuery來簡化代碼)

$(document).ready(function () {
    $('[data-toggle="offcanvas"]').click(function () {
      $('.sidebar-offcanvas').toggleClass('active');
    });
  });

根據這個思路，咱們能夠擴展這個組件，使組件能夠從左側出來或者右側出來，或者上下，但願對你們有所幫助！