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 面向对象编程基础 多态
Aug 21 Javascript
Javascript的一种模块模式
Sep 08 Javascript
JqGrid web打印实现代码
May 31 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
Layui 动态禁止select下拉的例子
Sep 03 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的一些小问题
2010/07/03 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php中的观察者模式简单实例
2015/01/20 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
用于table内容排序
2006/07/21 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
医院实习接收函
2014/01/12 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript