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 tab标签页的制作
May 10 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
koa源码中promise的解读
Nov 13 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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静态类
2006/11/25 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
python多维数组切片方法
2018/04/13 Python
python中count函数简单用法
2020/01/05 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
公司总经理岗位职责范本
2014/08/15 职场文书
2019求职信大礼包
2019/05/15 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL