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 15 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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 破解防盗链图片函数
2008/12/09 PHP
php 禁止页面缓存输出
2009/01/07 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
javascript数组排序汇总
2015/07/07 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
公司前台接待岗位职责
2013/12/03 职场文书
司法局火灾防控方案
2014/06/05 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
会议简讯范文
2015/07/20 职场文书
如何用python清洗文件中的数据
2021/06/18 Python