BootSideMenu是一款基于Bootstrap的jQuery隐藏滑动侧边栏特效插件。该隐藏滑动侧边栏基于Bootstrap 3制作,简单实用。菜单面板可以从屏幕的左侧或右侧进行隐藏显示。
使用方法
使用这个隐藏侧边栏插件要引入jQuery和BootSideMenu.js、BootSideMenu.css文件以及所需要的Bootstrap文件。
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="css/BootSideMenu.css"> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="js/BootSideMenu.js"></script>
HTML结构
该隐藏侧边栏特效使用嵌套<div>
的结构:
<div id="demo"> <div class="list-group"> <a href="#" class="list-group-item active">Item 1</a> <a href="#" class="list-group-item">Item 2</a> <a href="#" class="list-group-item">Item 3</a> <a href="#" class="list-group-item">Item 4</a> <a href="#" class="list-group-item">Item 5</a> ... </div> </div>
初始化插件
在页面加载完毕之后,通过下面的方法来初始化该隐藏侧边栏插件。
$('#demo').BootSideMenu();
配置参数
默认的配置参数如下:
$('#demo').BootSideMenu({ side:"left", // left or right autoClose:true // auto close when page loads });
- side:侧边栏面板从屏幕的哪个方向滑出,可选:"left"和"right"。
- autoClose:侧边栏面板在初始化时是否为隐藏状态。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!