码迷,mamicode.com
首页 > Web开发 > 详细

基于jQuery自适应窗口大小导航菜单

时间:2015-09-01 08:03:35      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

基于jQuery自适应窗口大小导航菜单。这是一款响应式导航菜单特效,支持手机导航菜单代码。效果图如下:

技术分享

在线预览    源码下载

实现的代码。

html代码:

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

js代码:

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

via:http://www.w2bc.com/article/59868

基于jQuery自适应窗口大小导航菜单

标签:

原文地址:http://www.cnblogs.com/w2bc/p/4774757.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!