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中eval函数的使用方法与示例
Apr 09 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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验证码函数的使用示例
2013/05/03 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue-router 组件复用问题详解
2018/01/22 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python模块的加载讲解
2019/01/15 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
Python是如何进行类型转换的
2013/06/09 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
违反交通安全法检讨书
2014/10/24 职场文书