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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
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
福利彩票幸运号码自动生成器
2006/10/09 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
市场营销毕业生自荐信范文
2014/04/01 职场文书
运动会口号16字
2014/06/07 职场文书
2014年招商工作总结
2014/11/22 职场文书
月考总结与反思
2015/10/22 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
MySQL导致索引失效的几种情况
2022/06/25 MySQL