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 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
Python实现截屏的函数
2015/07/26 Python
Python查看微信撤回消息代码
2018/06/07 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
python openpyxl模块的使用详解
2021/02/25 Python
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
学校岗位设置方案
2014/01/16 职场文书
工作态度检讨书
2014/02/11 职场文书
电子银行营销方案
2014/02/22 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
大二学习计划书范文
2014/04/27 职场文书
农行心得体会
2014/09/02 职场文书
综合办公室岗位职责
2015/04/11 职场文书
员工离职通知函
2015/04/25 职场文书
通用员工手册范本
2015/05/14 职场文书
离婚律师函范本
2015/05/27 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python