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 相关文章推荐
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
js密码强度校验
Nov 10 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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详细彻底学习Smarty
2008/03/27 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python计算auc指标实例
2017/07/13 Python
python实现rsa加密实例详解
2017/07/19 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
详解Python if-elif-else知识点
2018/06/11 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python十进制转二进制的详解
2020/02/07 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
优秀学生事迹材料
2014/02/08 职场文书
教研活动总结
2014/04/28 职场文书
珍惜资源的建议书
2014/08/26 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
有关浪费资源的建议书
2015/09/14 职场文书