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

发布于 2018-03-25 10:26:49 字数 1633 浏览 2379 评论 0

如果大家需要创建一个隐藏式的边栏菜单的话,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/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。