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 相关文章推荐
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
vue实现计算器功能
Feb 22 Javascript
vue实现简单加法计算器
Oct 22 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
人族 Terran 基本策略
2020/03/14 星际争霸
cache_lite试用
2007/02/14 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php 删除数组元素
2009/01/16 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP常用数组函数介绍
2014/07/28 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python的高阶函数用法实例分析
2019/04/11 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
公司财务自我评价分享
2013/12/17 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
2015年清明节活动总结
2015/02/09 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
导游词书写之黄山
2019/08/06 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
MySQL RC事务隔离的实现
2022/03/31 MySQL
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android