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 相关文章推荐
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
分享Javascript实用方法二
Dec 13 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 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中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php限制ip地址范围的方法
2015/03/31 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
js opener的使用详解
2014/01/11 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python 列表(List)操作方法详解
2014/03/11 Python
python检索特定内容的文本文件实例
2018/06/05 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python3实现高效的端口扫描
2019/08/31 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Python 切分数组实例解析
2019/11/07 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
python判断变量是否为列表的方法
2020/09/17 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技