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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
js字符编码函数区别分析
Dec 28 Javascript
js中的this关键字详解
Sep 25 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
如何编写jquery插件
Mar 29 jQuery
React Native中Navigator的使用方法示例
Oct 13 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Python3开发环境搭建详细教程
2020/06/18 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
党员培训思想汇报
2014/01/07 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
中学生检讨书1000字
2014/10/28 职场文书
高一军训决心书
2015/02/05 职场文书
篮球拉拉队口号
2015/12/25 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
求职信如何撰写?
2019/05/22 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers