sidr --为网页添加侧边滑出菜单栏

使用sidr

sidr是一个侧滑菜单插件，可以作为隐藏的选项，需要时点击滑出，查看在线demo可以感受效果 。要使用侧边栏工具，首先需要在网页源码中添加以下内容，注意路径改为你的路径

<script src="sources/js/jquery-3.1.1.min.js"></script>
<script src="sources/js/jquery.sidr.js"></script>
<link rel="stylesheet" href="sources/css/jquery.sidr.light.min.css">

其中最后一个是主题文件。使用方法，以右侧菜单为例

<a id="right-menu" href="#sidr"></a>
<div id="sidr" style="display: none;">
    <h2>内容选项</h2>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>

还有其他的几种侧滑菜单，如左侧的菜单，请参看在线demo

遇到问题

在侧滑菜单中，如果你要添加按钮或者其他html元素，你会发现很多效果都失效了，此时你需要去修改他的主题文件jquery.sidr.light.min.css或者jquery.sidr.dark.min.css。如果你使用白色背景的修改前者，使用黑色的就要修改后者，如添加button的格式

.sidr button {
    width: 100%;
    height: 35px;
    border:1px #ff0000 solid;
    background-color: #F8F8F8;
}

更改各个选项和或者其它元素照此修改即可。更改此文件也可以更改适合你的背景色