Sidr 快速创建隐藏式侧边栏菜单

Question

如果大家需要创建一个隐藏式的边栏菜单的话，Sidr 这个 jQuery 插件肯定能够帮助你快速的实现。这个插件拥有两个不同的样式主题，暗色和亮色，使用非常简单。

Sidr 是一个基于 jQuery 的插件，它能够很容易的创建响应式的侧栏菜单，侧栏菜单默认不可见，当你点击按钮的时候，侧栏菜单会以动画的形式从网页左边展开。配合 jquery.touchwipe.js，Sidr 还可以支持触摸事件，能更好的兼容智能手机和平板设备。

使用方法

1、首先 下载插件 文件和 jQuery 库文件。

2、在网页中引入插件文件，注意文件的引入顺序。

<!-- Include jQuery -->
<script src="jquery.min.js"></script>
<!-- Include the Sidr JS -->
<script src="jquery.sidr.min.js"></script>

3、编写HTML代码，在网页的可视区域放置一个点击按钮，提示用户点击展开更多内容，然后在编辑一个菜单的列表。

<!-- Your stuff -->
<a id="simple-menu" href="#sidr">更多操作选项</a>
<div id="sidr">
    <!-- Your content -->
    <ul>
        <li class="active"><a href="#">缩放</a></li>
        <li><a href="#">阅读</a></li>
        <li><a href="#">删除</a></li>
        <li><a href="#">编辑</a></li>
    </ul>
</div>

4、调用插件，通过插件的sidr()方法调用插件。

<script>
$(function(){
    $('#simple-menu').sidr();
})
</script>

项目地址：http://www.berriart.com/sidr/