Sidr 快速创建隐藏式侧边栏菜单 - 文章教程

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

发布于 2018-03-25 字数 1921 浏览 2229 评论 0

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

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

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/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0