JQuery自適應(yīng)窗口大小導(dǎo)航菜單附源碼下載

更新時間：2015年09月01日 15:11:47 投稿：mrr

本文給大家分享jquery自適應(yīng)窗口大小導(dǎo)航菜單，也是一款響應(yīng)式的導(dǎo)航菜單，有深色樣式、淺色樣式、自定義樣式，接下來，需要的學(xué)習(xí)的小伙伴參考此文吧

效果圖如下：

查看演示源碼下載

html代碼：

<h1>jQuery / Zepto響應(yīng)式菜單 PgwMenu 演示</h1> 
 <p class="dowebok-explain">請縮小/放大瀏覽器窗口寬度查看效果</p> 
 <h2>深色樣式（默認(rèn)）</h2> 
 <ul class="pgwMenu"> 
  <li><a class="selected" href="http://www.dbjr.com.cn/">首頁</a></li> 
  <li><a href="http://www.dbjr.com.cn/">代碼</a></li> 
  <li><a href="http://www.dbjr.com.cn/">素材</a></li> 
  <li><a href="http://www.dbjr.com.cn/">模板</a></li> 
  <li><a href="javascript:">關(guān)于</a></li> 
  <li><a href="javascript:">服務(wù)</a></li> 
  <li><a href="http://www.dbjr.com.cn/">聯(lián)系</a></li> 
 </ul> 
 <h2>淺色樣式（默認(rèn)）</h2> 
 <ul class="pgwMenu light"> 
  <li><a class="selected" href="http://www.dbjr.com.cn/">首頁</a></li> 
  <li><a href="http://www.dbjr.com.cn/">代碼</a></li> 
  <li><a href="http://www.dbjr.com.cn/">素材</a></li> 
  <li><a href="http://www.dbjr.com.cn/">模板</a></li> 
  <li><a href="javascript:">關(guān)于</a></li> 
  <li><a href="javascript:">服務(wù)</a></li> 
  <li><a href="http://www.dbjr.com.cn/">聯(lián)系</a></li> 
 </ul> 
 <h2>自定義樣式</h2> 
 <ul class="pgwMenuCustom"> 
  <li><a class="selected" href="http://www.dbjr.com.cn/">首頁</a></li> 
  <li><a href="http://www.dbjr.com.cn/">代碼</a></li> 
  <li><a href="http://www.dbjr.com.cn/">素材</a></li> 
  <li><a href="http://www.dbjr.com.cn/">模板</a></li> 
  <li><a href="javascript:">關(guān)于</a></li> 
  <li><a href="javascript:">服務(wù)</a></li> 
  <li><a href="http://www.dbjr.com.cn/">聯(lián)系</a></li> 
 </ul>

Js代碼

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

以上內(nèi)容就是本文給大家介紹JQuery自適應(yīng)窗口大小導(dǎo)航菜單的全部內(nèi)容，希望大家喜歡。

您可能感興趣的文章: