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>
