插件描述:这是一款基于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
初始化插件
在页面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');
});
});