自己动手写一个侧导航栏组件

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');
    });
  });

根据这个思路，我们可以扩展这个组件，使组件可以从左侧出来或者右侧出来，或者上下，希望对大家有所帮助！