Bamboo.js是一款简单实用jQuery响应式固定侧边栏插件。该插件使用简单固定侧边栏结构,带有固定位置的标题,侧边栏不会随页面而滚动。你可以为创建设置一个breakpoint,当屏幕尺寸小于这个breakpoint的时候侧边栏会隐藏,同时显示一个汉堡图标作为菜单的导航图标。
使用方法
使用该固定侧边栏插件首先要引入jQuery、Bamboo.js和Bamboo.css文件。
<link rel="stylesheet" href="css/bamboo.css"> <script src="js/jquery.min.js"></script> <script src="js/bamboo.js"></script>
HTML结构
<nav id="main-nav" class="navigation overflow"> <ul> <li><a href="#">Menu item</a></li> <li><a href="#">Menu item 2</a></li> </ul> </nav> <div id="container"> <header class="primary"> <span class="open icon">☰</span> <hgroup><h1>Title</h1></hgroup> </header> <section id="scroller" class="overflow"> <div id="content"> <!-- Content goes in here --> <!-- Content ends --> </div> </section> </div>
调用插件
<script> var site = new Bamboo(); </script>
配置参数
menu: true/false breakpoint: default (768), menuWidth: default (265), headerHeight: default (50), snapThreshold: null or 0-1, resize: null // function to allow a callback
例如可以如下在插件初始化时设置参数:
var site = new Bamboo({ menu: true, swipeToOpen: false, breakpoint: 768, menuWidth: 265, headerHeight: 50, resize: function(){ // function to call on page resize/orientation change } });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!