当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/07/25 来源:互联网 浏览: 关键词:响应式 jquery 菜单导航 侧边栏 
jQuery简单实用的响应式固定侧边栏插件 jQuery简单实用的响应式固定侧边栏插件
阿里云

简要教程

Bamboo.js是一款简单实用jQuery响应式固定侧边栏插件。该插件使用简单固定侧边栏结构,带有固定位置的标题,侧边栏不会随页面而滚动。你可以为创建设置一个breakpoint,当屏幕尺寸小于这个breakpoint的时候侧边栏会隐藏,同时显示一个汉堡图标作为菜单的导航图标。

使用方法

使用该固定侧边栏插件首先要引入jQuery、Bamboo.js和Bamboo.css文件。

<linkrel="stylesheet"href="css/bamboo.css">
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/bamboo.js"></script>  

HTML结构

<navid="main-nav"class="navigation overflow">
    <ul>
    <li><ahref="#">Menu item</a></li>
    <li><ahref="#">Menu item 2</a></li>
</ul>
</nav>
<divid="container">
    <headerclass="primary">
        <spanclass="open icon">☰</span>
        <hgroup><h1>Title</h1></hgroup>
    </header>
    <sectionid="scroller"class="overflow">
        <divid="content">
            <!-- Content goes in here -->
 
            <!-- Content ends -->
        </div>
    </section>
 
</div>   

调用插件

<script>
    varsite =newBamboo();
</script>    

配置参数

menu:true/false
breakpoint:default(768),
menuWidth:default(265),
headerHeight:default(50),
snapThreshold:nullor 0-1,
resize:null// function to allow a callback   

例如可以如下在插件初始化时设置参数:

varsite =newBamboo({
    menu:true,
    swipeToOpen:false,
    breakpoint: 768,
    menuWidth: 265,
    headerHeight: 50,
    resize:function(){
        // function to call on page resize/orientation change
    }
});  

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top