JQuery自适应窗口大小导航菜单附源码下载

2024-09-27 19:35:12

效果图如下：

查看演示源码下载

html代码：

<h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1>
 <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p>
 <h2>深色样式（默认）</h2>
 <ul class="pgwMenu">
  <li><a class="selected" href="http://www.jb51.net/">首页</a></li>
  <li><a href="http://www.jb51.net/">代码</a></li>
  <li><a href="http://www.jb51.net/">素材</a></li>
  <li><a href="http://www.jb51.net/">模板</a></li>
  <li><a href="javascript:">关于</a></li>
  <li><a href="javascript:">服务</a></li>
  <li><a href="http://www.jb51.net/">联系</a></li>
 </ul>
 <h2>浅色样式（默认）</h2>
 <ul class="pgwMenu light">
  <li><a class="selected" href="http://www.jb51.net/">首页</a></li>
  <li><a href="http://www.jb51.net/">代码</a></li>
  <li><a href="http://www.jb51.net/">素材</a></li>
  <li><a href="http://www.jb51.net/">模板</a></li>
  <li><a href="javascript:">关于</a></li>
  <li><a href="javascript:">服务</a></li>
  <li><a href="http://www.jb51.net/">联系</a></li>
 </ul>
 <h2>自定义样式</h2>
 <ul class="pgwMenuCustom">
  <li><a class="selected" href="http://www.jb51.net/">首页</a></li>
  <li><a href="http://www.jb51.net/">代码</a></li>
  <li><a href="http://www.jb51.net/">素材</a></li>
  <li><a href="http://www.jb51.net/">模板</a></li>
  <li><a href="javascript:">关于</a></li>
  <li><a href="javascript:">服务</a></li>
  <li><a href="http://www.jb51.net/">联系</a></li>
 </ul>

Js代码

$(function () {
   $('.pgwMenu').pgwMenu({
    dropDownLabel: '菜单',
    viewMoreLabel: '更多<span class="icon"></span>'
   });
   $('.pgwMenuCustom').pgwMenu({
    mainClassName: 'pgwMenuCustom',
    dropDownLabel: '菜单',
    viewMoreLabel: '更多<span class="icon"></span>'
   });
  });

以上内容就是本文给大家介绍JQuery自适应窗口大小导航菜单的全部内容，希望大家喜欢。

jquery实现红色竖向多级向右展开的导航菜单效果

本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍的是一款红色竖向多级向右展开的导航菜单,多用于博客网站的导航菜单,红色风格,非常漂亮,向右伸展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-red-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
jQuery实现类似标签风格的导航菜单效果代码

本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的类似TAB标签样式的网站导航菜单,引入了jquery,若运行代码后左上角提示错误,刷新页面即可正常.你可点击菜单查看到整体的效果.点击后对应菜单项下移,可扩展成二级菜单,也可以改成TAB标签布局,感兴趣的朋友自己研究吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bq-style-nav-menu-co
jQuery插件PageSlide实现左右侧栏导航菜单

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

本文实例讲述了jQuery实现简单的列表式导航菜单效果代码.分享给大家供大家参考.具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用.主要实现包括三个部分,一是CSS.二是引入jQuery.三是编写JS代码进行jQuery控件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下: <h
jQuery实现Meizu魅族官方网站的导航菜单效果

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

本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-bg-cha-black-nav-menu/ 具体代码如下: <!DOCTYPE html
jQuery实现淡入淡出二级下拉导航菜单的方法

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

本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码.分享给大家供大家参考.具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称"链接提示",鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容,提示用户到达需要的页面. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
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自适应窗口大小导航菜单附源码下载

效果图如下: 查看演示源码下载 html代码: <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> <h2>深色样式(默认)</h2> <ul class="pgwMenu"> <li><a class="selected&qu
Jquery 垂直多级手风琴菜单附源码下载

首先给大家展示下效果图,喜欢的朋友继续往下看哦. 这是一款简单但实用的多级垂直手风琴下拉列表菜单.该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果. 该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作.如果需要一些好看的动画效果,可以实用插件中提供的main.js文件,它可以提供菜单打开和收缩时左侧小箭头的动画效果. 效果演示源码下载使用方法 HTML结构该多级手风琴菜单的HTML结构非常简单:整个手风琴是一个无
jquery+css实现绚丽的横向二级下拉菜单-附源码下载

首先给大家展示下效果图: 查看效果源码下载 html代码部分: 代码如下: <!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"> <head
基于jQuery实现的扇形定时器附源码下载

效果图如下所示: 效果演示源码下载 Pietimer是一个可以在页面上生成一个扇形变化的定时器,它基于jQuery,可以自定义定时时间秒数,自定义扇形的颜色.宽度和高度等,并且支持定时结束时回调函数,可以控制开始和暂停,适用于需要定时器的页面如在线考试.限时抢购的场景. HTML 首先加载jquery库文件和pietimer.js文件. <script src="jquery.min.js"></script> <script src="jqu
jQuery实现产品对比功能附源码下载

产品对比相信大家并不陌生,为了方便用户对类似产品的相关信息进行有效直观的对比,一些电商网站产品或评测网站会为用户提供产品对比的功能,用户只需勾选多个需要对比的产品,就可以进行比对.本文将使用jQuery来给大家讲解如何实现产品对比功能. 查看演示下载源码 HTML HTML结构我们分三部分,第一是产品列表部分,展示所有可以对比的产品.我们以某手机网站为例,简单的结构,只需展示产品图片和名称,以及一个添加按钮.注意我们把手机的相关参数信息都放在属性data-*里,等会后面展示对比信息的时
基于Jquery实现仿百度百科右侧导航代码附源码下载

先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示源码下载代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候
jQuery自动完成插件completer附源码下载

我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入.诸如此类的还有时间的输入.域名的输入都能自动完成,这些都由插件completer来帮您实现. 效果展示图如下所示: 效果展示源码下载 HTML 首先载入jQuery库和插件completer.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了. <script src="jquery.js"><
基于jQuery实现选取月份插件附源码下载

这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单. 效果展示源码下载 HTML 首先将monthpicker插件相关的css和js文件载入,大家可以到源码下载里下载css和js文件. <link rel="stylesheet" type="text/css" href="jquery.mon
基于JS快速实现导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&
JS实现快速的导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

JQuery自适应窗口大小导航菜单附源码下载

相关推荐

随机推荐