jq 侧边栏

HTML

侧边栏HTML代码：

<div class="sidebar" id="sucaihuo"> 
    <div class="sidebar-wrapper" id="sidebar-wrapper"> 
        <ul class="nav"> 
            <li><a href="http://www.sucaihuo.com/">sucaihuo</a></li> 
            <li><a href="http://www.sucaihuo.com/js">js</a></li> 
            <li><a href="http://www.sucaihuo.com/js">素材</a></li> 
            <li><a href="http://www.sucaihuo.com/template">模板</a></li> 
            <li><a href="http://www.sucaihuo.com/js">联系</a></li> 
        </ul> 
    </div> 
</div>

jQuery

$(function() { 
    $('#sucaihuo').simplerSidebar({ 
        opener: '#toggle-sidebar', 
        sidebar: { 
            align: 'left', 
            width: 250 
        } 
    }); 
});

参数	描述	默认值
opener	按钮或图标的选择器，用来触发侧边栏	en
attr	为侧边栏添加 data 属性，即默认添加 data-simplersidebar=”disabled” / data-simplersidebar=”active”	simplersidebar
top	设置侧边栏 top 值	0
animation	动画持续时间及动画方式，默认为： { duration: 500, easing: ‘swing’ }	-
sidebar	设置侧边栏的属性，如位置、宽度等，默认为： { width: 350, gap: 64, closingLinks: ‘a’, css: { zIndex: 3000 } }	-
mask	实现显示遮罩及设置遮罩属性：默认为： { display: true, css: { backgroundColor: ‘black’, opacity: 0.5, filter: ‘Alpha(opacity=50)’ } }	-