Bootstrap-off-canvas-push是一款基于Bootstrap3的隐藏滑动侧边栏jQuery插件。该侧边栏插件在大屏幕设备中会显示正常的水平顶部菜单，在移动手机等小屏幕设备中，菜单将转换为隐藏滑动侧边栏。

Bootstrap默认在小屏幕设备上会将菜单隐藏，只显示一个汉堡包按钮。但是隐藏菜单没有滑动推拉的效果。offcanvas.js侧边栏插件可以将Bootstrap的隐藏菜单转换为滑动菜单。

使用方法

使用offcanvas.js侧边栏插件依赖于Bootstrap，需要引入相关的依赖文件。同时还要引入插件本身的offcanvas.min.js和offcanvas.min.css文件。

<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/offcanvas.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/offcanvas.min.js"></script>
HTML结构

该Bootstrap隐藏滑动侧边栏插件需要一个空的遮罩层。

<div class="overlay"></div>

该隐藏滑动侧边栏目前只能工作在navbar-static-top类型的菜单上。

<nav class="navbar navbar-inverse navbar-static-top">

汉堡包菜单的data-toggle值要设置为offcanvas。另外要添加pull-left class。

<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="offcanvas" aria-controls="navbar">

为导航菜单的菜单项添加sidebar-offcanvas class。

<div id="navbar" class="collapse navbar-collapse sidebar-offcanvas">

在页面主内容部分添加class row-offcanvas和row-offcanvas-left。

<div class="row-offcanvas row-offcanvas-left">

完整的Bootstrap隐藏滑动侧边栏的HTML结构如下：

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="offcanvas">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse sidebar-offcanvas">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
<div class="container">
  <div class="row-offcanvas row-offcanvas-left">
    <!-- 页面内容部分 -->
  </div>
</div>