JQuery自適應視窗大小導覽功能表附源碼下載，jquery導覽功能表

JQuery自適應視窗大小導覽功能表附源碼下載，jquery導覽功能表

如下：

查看示範  源碼下載

html代碼：

<h1>jQuery / Zepto響應式菜單 PgwMenu 示範</h1>  <p class="dowebok-explain">請縮小/放大瀏覽器視窗寬度查看效果</p>  <h2>深色樣式（預設）</h2>  <ul class="pgwMenu">   <li><a class="selected" href="http://www.bkjia.com/">首頁</a></li>   <li><a href="http://www.bkjia.com/">代碼</a></li>   <li><a href="http://www.bkjia.com/">素材</a></li>   <li><a href="http://www.bkjia.com/">模板</a></li>   <li><a href="javascript:">關於</a></li>   <li><a href="javascript:">服務</a></li>   <li><a href="http://www.bkjia.com/">聯絡</a></li>  </ul>  <h2>淺色樣式（預設）</h2>  <ul class="pgwMenu light">   <li><a class="selected" href="http://www.bkjia.com/">首頁</a></li>   <li><a href="http://www.bkjia.com/">代碼</a></li>   <li><a href="http://www.bkjia.com/">素材</a></li>   <li><a href="http://www.bkjia.com/">模板</a></li>   <li><a href="javascript:">關於</a></li>   <li><a href="javascript:">服務</a></li>   <li><a href="http://www.bkjia.com/">聯絡</a></li>  </ul>  <h2>自訂樣式</h2>  <ul class="pgwMenuCustom">   <li><a class="selected" href="http://www.bkjia.com/">首頁</a></li>   <li><a href="http://www.bkjia.com/">代碼</a></li>   <li><a href="http://www.bkjia.com/">素材</a></li>   <li><a href="http://www.bkjia.com/">模板</a></li>   <li><a href="javascript:">關於</a></li>   <li><a href="javascript:">服務</a></li>   <li><a href="http://www.bkjia.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自適應視窗大小導覽功能表的全部內容，希望大家喜歡。