导航菜单
超酷Bootstrap 3隐藏滑动侧边栏菜单
PetitQ
这是一款基于 Bootstrap3 的炫酷隐藏滑动侧边栏菜单特效。该隐藏侧边栏通过汉堡包按钮来打开和关闭侧边栏菜单，并通过 CSS3 来制作平滑的过渡动画效果，整体效果非常炫酷。
使用方法:
在页面中引入 bootstrap 的相关文件，以及侧边栏菜单的样式文件 style.css 文件。
也想出现在这里？联系我们吧
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='css/style.css'>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
HTML 结构:
侧边栏的 HTML 结构如下：
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Bootstrap 3</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Dropdown heading</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-dropbox"></i> Page 5</a>
</li>
<li>
<a href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
</li>
</ul>
</nav>
初始化插件:
在页面 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');
});
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
