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 28 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
js实现点击烟花特效
Oct 14 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简单读取xml文件的方法示例
2017/04/20 PHP
JavaScript 学习技巧
2010/02/17 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
python实现连接mongodb的方法
2015/05/08 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python批量发送post请求的实现代码
2018/05/05 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
python实现加密的方式总结
2020/01/19 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python操作yaml说明
2020/04/08 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
什么是索引指示器
2012/08/20 面试题
出国留学自荐信
2013/10/25 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书