演示1-左侧 演示2-右侧 下载

简介

Simpler Sidebar 是一款基于 jQuery 的侧边栏插件，和 SidebarJS 类似。Simpler Sidebar 可以设置侧边栏的位置（左边或右边）、宽度，同时还可以设置是否显示遮罩以及遮罩的透明度。

浏览器兼容

IE7+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/simpler-sidebar.min.js"></script>

2、HTML

<div class="sidebar" id="dowebok">
    <div class="sidebar-wrapper" id="sidebar-wrapper">
        <ul class="nav">
            <li><a href="//www.dowebok.com/">dowebok</a></li>
            <li><a href="//www.dowebok.com/code">代码</a></li>
            <li><a href="//www.dowebok.com/material">素材</a></li>
            <li><a href="//www.dowebok.com/template">模板</a></li>
            <li><a href="//www.dowebok.com/contact">联系</a></li>
        </ul>
    </div>
</div>

3、CSS

.sidebar-wrapper {
    position: relative;
    height: 100%;
    overflow: auto;
}

4、JavaScript

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

配置

属性/方法	类型	默认值	说明
opener	字符串	en	按钮或图标的选择器，用来触发侧边栏
attr	字符串	simplersidebar	为侧边栏添加 data 属性，即默认添加 data-simplersidebar=”disabled” / data-simplersidebar=”active”
top	整数	0	设置侧边栏 top 值
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)’ } }

GitHub 地址：https://github.com/dcdeiv/simpler-sidebar