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中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
浅析Jquery操作select
Dec 13 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
vuex存储token示例
Nov 11 Javascript
js实现div色块碰撞
Jan 16 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python机器学习实现决策树
2019/11/11 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
护士节演讲稿开场白
2014/08/25 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2015员工年度考核评语
2015/03/25 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
2016国培学习心得体会
2016/01/08 职场文书
施工安全协议书
2016/03/22 职场文书
Python if else条件语句形式详解
2022/03/24 Python