jQuery簡單實用的響應式固定側邊欄外掛

listjjjclove發表於2024-12-03
jQuery

Bamboo.js是一款簡單實用JQUERY響應式固定側邊欄外掛。該外掛使用簡單固定側邊欄結構，帶有固定位置的標題，側邊欄不會隨頁面而滾動。你可以為建立設定一個breakpoint，當螢幕尺寸小於這個breakpoint的時候側邊欄會隱藏，同時顯示一個漢堡圖示作為選單的導航圖示。

演示 下載

使用方法

使用該固定側邊欄外掛首先要引入jQuery、Bamboo.js和Bamboo.css檔案。

< link rel="stylesheet" href="css/bamboo.css">
< script src="js/jquery.min.js">
< script src="js/bamboo.js">
HTML結構
< nav id="main-nav" class="navigation overflow">
    < ul >
    < li >< a href="#">Menu item
    < li >< a href="#">Menu item 2


< div id="container">
    < header class="primary">
        < span class="open icon">☰
        < hgroup >< h1 >Title
    
    < section id="scroller" class="overflow">
        < div id="content">
呼叫外掛

配置引數

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

相關文章