jQuery插件PageSlide实现左右侧栏导航菜单

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>

查看演示  插件下载

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • javascript实现动态侧边栏代码

    javascript实现动态侧边栏代码

    总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 复制代码 代码如下: <body><div id="div1"><span>侧边栏</span></div></body> 然后是css的样式: 复制代码 代码如下: #div1{    width:150px;    height:200px;    background:#999

  • JS运动框架之分享侧边栏动画实例

    本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="text/css">         

  • 简单的jquery左侧导航栏和页面选中效果

    简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external

  • jQuery固定浮动侧边栏实现思路及代码

    这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可. 代码如下 HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id=&qu

  • jQuery侧边栏随窗口滚动实现方法

    复制代码 代码如下: $(function() {    var $sidebar   = $("#sidebar"),           $window    = $(window),           offset     = $sidebar.offset(),           topPadding = 15; $window.scroll(function() {           if ($window.scrollTop() > offset.top) { 

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • Jquery实现侧边栏跟随滚动条固定（兼容IE6）

    部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: 复制代码 代码如下: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改var offset = rollSet.offset();$(window).scroll(function () { // 检查对象的顶部是否在游览器可见的范围内 var scrollTop

  • 利用js编写响应式侧边栏

    为了练手,自己学敲网站时刚好碰到需要制作侧边栏,在网上也查了各种插件以及框架都可以实现这个功能,但是想自己学着用js原生学一个试试,于是就初略完成了侧边栏的实现,可以让初学者参考参考,代码能力有限. 其中主要设计的就是animate()函数,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如

  • JavaScript中实现无缝滚动、分享到侧边栏实例代码

    废话不多说,直接给大家贴代码了,代码解决一起问题! 下面一段代码给大家介绍js无缝滚动实例代码: 代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery左右侧栏导航菜单插件PageSlide,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的,支持自定义展现的方向,菜单内容可自行定义,支持加载页面,或者模态的窗格中显示此页的隐藏的内容,推荐使用. 使用方法: 1.加载插件和jQuery <link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" /> <scrip

  • 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css

  • jQuery模仿京东/天猫商品左侧分类导航菜单效果

    jQuery模仿京东/天猫商品左侧分类导航菜单效果

    现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了! 我的布局大致是这样的: <

  • jQuery实现淡入淡出二级下拉导航菜单的方法

    jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,鼠标移动到包括二级子菜单的主菜单上,会立即渐显出二级的子菜单,鼠标在二级子菜单上划过,子菜单项的背景会改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/ 具体代

  • jQuery仿Flash上下翻动的中英文导航菜单实例

    本文实例讲述了jQuery仿Flash上下翻动的中英文导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • jQuery+css实现的蓝色水平二级导航菜单效果代码

    jQuery+css实现的蓝色水平二级导航菜单效果代码

    本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • jQuery实现Meizu魅族官方网站的导航菜单效果

    jQuery实现Meizu魅族官方网站的导航菜单效果

    本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下边会有一条横线在滑动.一直想找类似的效果学一下.结果,不是忘记有类似效果的网站的网址,就是压根儿找不到..又不知道怎么描述,今天总算碰到了,真给力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-meizu-web-nav-menu-

  • jquery实现具有收缩功能的垂直导航菜单

    本文介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>垂直导航菜单</title> <style type="text/css"> body{ margin:0; padding:0 0 12px 0

  • 如何使用jQuery技术开发ios风格的页面导航菜单

    如何使用jQuery技术开发ios风格的页面导航菜单

    效果图: 目前市场上越来越流行IOS风格的操作系统和导航方式,在今天的jQuery教程中,我们介绍如何生成一个iphone风格的菜单导航. HTML代码 我们使用镶嵌的<li>来生成菜单内容,并且包含在<nav>标签中,如下: <nav> <h1>导航菜单</h1> <ul> <li> <h2>专题教程</h2> <ul> <li> <h3>HTML专题教程<

  • jQuery实现仿美橙互联两级导航菜单效果完整实例

    jQuery实现仿美橙互联两级导航菜单效果完整实例

    本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像是一个滑动门,不会让你失望的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

随机推荐