jQuery简单实用的响应式固定侧边栏插件

当前位置:主页 > jQuery库 > 菜单和导航 > jQuery简单实用的响应式固定侧边栏插件
jQuery简单实用的响应式固定侧边栏插件
分享:

    插件介绍

    Bamboo.js是一款简单实用jQuery响应式固定侧边栏插件。你可以为创建设置一个breakpoint,当屏幕尺寸小于这个breakpoint的时候侧边栏会隐藏,同时显示一个汉堡图标作为菜单的导航图标。

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-23
    阅读:
简要教程

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
    }
});