bootstrap 侧边栏菜单颜色_超酷Bootstrap 3 隐藏滑动侧边栏菜单

插件描述：这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。

Bootstrap3侧边栏菜单

这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。该隐藏侧边栏通过汉堡包按钮来打开和关闭侧边栏菜单，并通过CSS3来制作平滑的过渡动画效果，整体效果非常炫酷。

使用方法

在页面中引入bootstrap的相关文件，以及侧边栏菜单的样式文件style.css文件。

HTML结构

侧边栏的HTML结构如下：

role="navigation">

   Bootstrap 3       Home       Page one       Second page       Third page       Dropdown   

•  Dropdown heading 
•   Action  
•   Another action  
•   Something else here  
•   Separated link  
•   One more separated link  

     Page four       Page 5       Last page  

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来为汉堡包按钮添加相应的交互事件，以及为侧边栏的打开和关闭添加和移除相应的class类。$(document).ready(function() {

var trigger = $('.hamburger'),

overlay = $('.overlay'),

isClosed = false;

trigger.click(function() {

hamburger_cross();

});

function hamburger_cross() {

if (isClosed == true) {

overlay.hide();

trigger.removeClass('is-open');

trigger.addClass('is-closed');

isClosed = false;

} else {

overlay.show();

trigger.removeClass('is-closed');

trigger.addClass('is-open');

isClosed = true;

}

}

$('[data-toggle="offcanvas"]').click(function() {

$('#wrapper').toggleClass('toggled');

});

});