[代码样式]Simpler Sidebar – jQuery侧边栏插件

简介

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

浏览器兼容

IE7+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/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="https://www.dowebok.com/" rel="external nofollow" >dowebok</a></li>
            <li><a href="https://www.dowebok.com/code" rel="external nofollow" >代码</a></li>
            <li><a href="https://www.dowebok.com/material" rel="external nofollow" >素材</a></li>
            <li><a href="https://www.dowebok.com/template" rel="external nofollow" >模板</a></li>
            <li><a href="https://www.dowebok.com/contact" rel="external nofollow" >联系</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
        }
    });
});

配置

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