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


Posted in Javascript onSeptember 01, 2015

效果图如下:

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

查看演示  源码下载

html代码:

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

Js代码 

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

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

Javascript 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
AngularJS Controller作用域
Jan 09 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
代码详解javascript模块加载器
Mar 04 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 #Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 #Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 #Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 #Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 #Javascript
JS实现黑客帝国文字下落效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
You might like
自动跳转中英文页面
2006/10/09 PHP
PHP中Array相关函数简介
2016/07/03 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
超级退弹代码
2008/07/07 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
有关Python的22个编程技巧
2018/08/29 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
导致python中import错误的原因是什么
2020/07/01 Python
python文件排序的方法总结
2020/09/13 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
中专生毕业自我鉴定
2013/11/01 职场文书
火车来了教学反思
2014/02/11 职场文书
告知书格式
2015/07/01 职场文书
2016年教师节慰问信
2015/12/01 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
python装饰器代码解析
2022/03/23 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js