jQuery插件PageSlide实现左右侧栏导航菜单


Posted in Javascript onApril 12, 2015

jQuery左右侧栏导航菜单插件PageSlide,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的,支持自定义展现的方向,菜单内容可自行定义,支持加载页面,或者模态的窗格中显示此页的隐藏的内容,推荐使用。

使用方法:

1.加载插件和jQuery

<link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" /> 
<script src="../lib/jquery-1.7.1.min.js"></script> 
<script src="../jquery.pageslide.min.js"></script>

2.使用方式

2.1 向右,滑动并从辅助页加载内容

<a href="_secondary.html" class="first">Link text</a> 
<script> 
 $("a.first").pageslide(); 
</script>

2.2 滑到左边,并在模态的窗格中显示此页的隐藏的内容

<a href="#modal" class="second"></Link text</a> 
<div id="modal" style="display:none"> 
 <h2>Modal</h2> 
 <a href="javascript:$.pageslide.close()"></Closea> 
</div>

2.3 函数打开

<a href="javascript:$.pageslide({ direction: 'left', href:'_secondary.html' })">Link text</a>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
jquery validate表单验证插件
Sep 06 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 #Javascript
JavaScript 面向对象与原型
Apr 10 #Javascript
javascript基本包装类型介绍
Apr 10 #Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 #Javascript
js改变embed标签src值的方法
Apr 10 #Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 #Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 #Javascript
You might like
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
原生js实现3D轮播图
2020/03/21 Javascript
Python XML RPC服务器端和客户端实例
2014/11/22 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python显示生日是星期几的方法
2015/05/27 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
django框架auth模块用法实例详解
2019/12/10 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
人力资源经理自我评价
2014/01/04 职场文书
美容院店长岗位职责
2014/04/08 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
幼儿学前班评语
2014/12/29 职场文书
兴趣班停课通知
2015/04/24 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
2015年材料员工作总结
2015/04/30 职场文书
劳动仲裁调解书
2015/05/20 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python