fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

sidr
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://www.berriart.com/sidr/
GitHub:https://github.com/artberri/sidr
网站描述:创建侧栏和响应式菜单的最佳 jQuery 插件

现在响应式被提的越来越多,因为各种终端不停的涌现:各种大小不一的手机、各种尺寸的 Pad 等等,为了让页面在这些终端中都能正常访问,所以就需要响应式的设计。

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

Sidr 自带两个主题,一个黑色的(jquery.sidr.dark.css),一个白色的(jquery.sidr.light.css),当然你也可以自己制作主题。


使用方法

引入文件

<link rel="stylesheet" href="css/jquery.sidr.dark.css">
<script src="js/jquery.min.js"></script>
<script src="js/sidr.js"></script>

html

<a id="simple-menu" href="#sidr">点击这里</a>

<div id="sidr">
    <ul>
        <li><a href="###">dowebok.com</a></li>
        <li><a href="###">代码</a></li>
        <li><a href="###">素材</a></li>
    </ul>
</div>

JavaScript

$(function() {
    $('#simple-menu').sidr();
});


参数

参数类型说明默认值
name字符串侧栏菜单的 idsidr
speed整数侧栏菜单展开的动画时间,单位为毫秒200
slide字符串侧栏菜单方向左边
source字符串一个jQuery选择器,一个URL或一个回调函数无
renaming布尔值true
body字符串sidr 默认使用 body 作为主体,你可以制定其他元素body

链接: https://fly63.com/nav/1681

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览