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

更新時(shí)間：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">請(qǐng)縮小/放大瀏覽器窗口寬度查看效果</p> 
 <h2>深色樣式（默認(rèn)）</h2> 
 <ul class="pgwMenu"> 
  <li><a class="selected" href="http://www.dhdzp.com/">首頁(yè)</a></li> 
  <li><a href="http://www.dhdzp.com/">代碼</a></li> 
  <li><a href="http://www.dhdzp.com/">素材</a></li> 
  <li><a href="http://www.dhdzp.com/">模板</a></li> 
  <li><a href="javascript:">關(guān)于</a></li> 
  <li><a href="javascript:">服務(wù)</a></li> 
  <li><a href="http://www.dhdzp.com/">聯(lián)系</a></li> 
 </ul> 
 <h2>淺色樣式（默認(rèn)）</h2> 
 <ul class="pgwMenu light"> 
  <li><a class="selected" href="http://www.dhdzp.com/">首頁(yè)</a></li> 
  <li><a href="http://www.dhdzp.com/">代碼</a></li> 
  <li><a href="http://www.dhdzp.com/">素材</a></li> 
  <li><a href="http://www.dhdzp.com/">模板</a></li> 
  <li><a href="javascript:">關(guān)于</a></li> 
  <li><a href="javascript:">服務(wù)</a></li> 
  <li><a href="http://www.dhdzp.com/">聯(lián)系</a></li> 
 </ul> 
 <h2>自定義樣式</h2> 
 <ul class="pgwMenuCustom"> 
  <li><a class="selected" href="http://www.dhdzp.com/">首頁(yè)</a></li> 
  <li><a href="http://www.dhdzp.com/">代碼</a></li> 
  <li><a href="http://www.dhdzp.com/">素材</a></li> 
  <li><a href="http://www.dhdzp.com/">模板</a></li> 
  <li><a href="javascript:">關(guān)于</a></li> 
  <li><a href="javascript:">服務(wù)</a></li> 
  <li><a href="http://www.dhdzp.com/">聯(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)航菜單的全部?jī)?nèi)容，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

一些有用的JavaScript和jQuery的片段分享
通過添加 CSS 類改變?cè)氐耐庥^和感覺，非常干凈的方法，而不是添加內(nèi)聯(lián)樣式。
2011-08-08
JQuery懸?？刂茍D片輪播——代碼簡(jiǎn)單
jquery實(shí)現(xiàn)的鼠標(biāo)懸停圖片自動(dòng)輪播效果，當(dāng)把鼠標(biāo)懸停到圖片時(shí)，圖像就會(huì)不斷循環(huán)播放，速度非?？欤Ч浅１普?，就和在放武俠片一樣，使用了jquery實(shí)現(xiàn)
2015-08-08
jQuery中的pushStack實(shí)現(xiàn)原理和應(yīng)用實(shí)例
這篇文章主要介紹了jQuery中的pushStack實(shí)現(xiàn)原理和應(yīng)用實(shí)例,pushStack是jQuery內(nèi)核中一個(gè)非常重要的函數(shù),許多jQuery內(nèi)部函數(shù)中都頻繁用到它,掌握這個(gè)函數(shù),有利于理解jQuery的運(yùn)行原理,需要的朋友可以參考下
2015-02-02
跟我一起學(xué)JQuery插件開發(fā)
一直比較好奇，jquery插件是怎么開發(fā)的，怎么寫屬于自己的插件
2012-04-04
jQuery選擇沒有colspan屬性的td的代碼
為了試著用jQuery找出一個(gè)table中沒有colspan屬性的td，試了很多種方法，這個(gè)是最好的，記在這里，下次不要再忘了
2010-07-07
jQuery的中 is('':visible'') 解析及用法(必看)
下面小編就為大家?guī)硪黄猨Query的中 is(':visible') 解析及用法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
JQuery開發(fā)的數(shù)獨(dú)游戲代碼
08年的時(shí)候裝上ubuntu試用了一下，發(fā)現(xiàn)里面自帶了一個(gè)數(shù)獨(dú)游戲，索性自己用jquery做了一個(gè)數(shù)獨(dú)游戲。
2010-10-10
實(shí)現(xiàn)placeholder效果的方案匯總
由于placeholder是html5的新屬性，可想而知，僅支持html5的瀏覽器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。
2015-06-06
jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加與刪除相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下
2016-08-08
jQuery EasyUI Pagination實(shí)現(xiàn)分頁(yè)的常用方法
這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI Pagination實(shí)現(xiàn)分頁(yè)的常用方法，感興趣的朋友可以參考一下
2016-05-05