html代码：
<body>
<h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1>
<p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p>
<h2>深色样式（默认）</h2>
<ul class="pgwMenu">
<li><a class="selected" href="#">首页</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">模板</a></li>
<li><a href="javascript:">关于</a></li>
<li><a href="javascript:">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
<h2>浅色样式（默认）</h2>
<ul class="pgwMenu light">
<li><a class="selected" href="#">首页</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">模板</a></li>
<li><a href="javascript:">关于</a></li>
<li><a href="javascript:">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
<h2>自定义样式</h2>
<ul class="pgwMenuCustom">
<li><a class="selected" href="#">首页</a></li>
<li><a href="#">申报书</a></li>
<li class="mainlevel"><a href="#">课程概况</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li><a href="#">教学队伍</a></li>
<li><a href="#">课程资源</a></li>
<li class="mainlevel"><a href="#">实践条件</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">slideUp</a></li>
<li><a href="#">slideDown</a></li>
<li><a href="#">up and down</a></li>
<li><a href="#">animate</a></li>
</ul>
</li>
<li><a href="#">教学方法</a></li>
<li><a href="#">教学效果</a></li>
<li><a href="#">特色与创新</a></li>
<li><a href="#">政策支持</a></li>
<li><a href="#">互动交流</a></li>
</ul>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/pgwmenu.min.js"></script>
<script type="text/javascript">
$(function() {
$('.pgwMenu').pgwMenu({
dropDownLabel: '菜单',
viewMoreLabel: '更多<span class="icon"></span>'
});
$('.pgwMenuCustom').pgwMenu({
mainClassName: 'pgwMenuCustom',
dropDownLabel: '菜单',
viewMoreLabel: '更多<span class="icon"></span>'
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".pgwMenuCustom li").hover(function(){
$(this).find("ul").slideDown("slow");
},function(){
$(this).find("ul").slideUp("fast");
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
css代码：
<style>
h1 { padding: 30px 0; font: 32px "Microsoft Yahei"; text-align: center;}
h2 { margin-top: 50px; font: 24px "Microsoft Yahei";}
body { font-size: 14px;}
.dowebok-explain { margin-top: 20px; font-size: 14px; text-align: center; color: #f50;}
.pgwMenu a { padding: 0 30px;}
/* 自定义样式 */
.pgwMenuCustom {FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#3ba0fa,endColorStr=#1070c8); /*IE 6 7 8*/
background: -ms-linear-gradient(top, #3ba0fa, #1070c8); /* IE 10 */
background:-moz-linear-gradient(top,#3ba0fa,#1070c8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#3ba0fa), to(#1070c8));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3ba0fa), to(#1070c8)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #3ba0fa, #1070c8); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #3ba0fa, #1070c8); /*Opera 11.10+*/
height: 40px; position: relative; list-style: none }
.pgwMenuCustom ul { list-style: none; white-space: nowrap; margin: 0; padding: 0 }
.pgwMenuCustom .pm-links.mobile, .pgwMenuCustom .pm-viewMore>ul { background: #f1941c; box-shadow: 2px 2px 4px #777; position: absolute; left: 0; top: 100%; z-index: 1000 }
.pgwMenuCustom .pm-links.mobile li, .pgwMenuCustom .pm-viewMore>ul>li { display: block; clear: both; 175px }
.pgwMenuCustom li { float: left }
.pgwMenuCustom a { display: block; color: #fff; line-height: 40px; padding: 0 30px; text-decoration: none }
.pgwMenuCustom a.selected { background: #e5601d }
.pgwMenuCustom li a:hover { background: #e86f2e; text-decoration: none }
.pgwMenuCustom .pm-dropDown, .pgwMenuCustom .pm-viewMore, .pgwMenuCustom .pm-viewMore>ul { display: none }
.pgwMenuCustom .pm-dropDown a { display: inline-block; background: #e86f2e }
.pgwMenuCustom .pm-dropDown a.active, .pgwMenuCustom .pm-viewMore a.active { background: #e5601d }
.pgwMenuCustom .pm-dropDown span.icon, .pgwMenuCustom .pm-dropDown span.black { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvgAADr4B6kKxwAAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABpSURBVEhL7ZPLCcAwDEM9jefI/ks1Hyj2QbiGSLcKHggl8sEktjTc/WGyZxo6YKAbrFzFoav3/hdhmsrlijBN5XJFmKZyuSJMU7lcsfV/kIN0FRJgyACGDGDIAIYMpK8CHt6iG6xZhY0JIJ+6AHGbUFsAAAAASUVORK5CYII=) no-repeat; display: block; height: 22px; 22px; margin: 9px 5px }
.pgwMenuCustom .pm-dropDown span.white { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABKSURBVEhL7ZOxDQAwCMN6O4/T0tmjsxHJDB4yROJ0dz3s1BRHEi2OTREBpQFKA5QGKA3m7IP8RKeIgNIApQFKA5QGc/ZBfkJTdF0oUafLBAFNbAAAAABJRU5ErkJggg==) no-repeat; display: block; height: 22px; 22px; margin: 9px 5px }
.pgwMenuCustom .pm-viewMore { display: none; position: relative }
.pgwMenuCustom .pm-viewMore>a { display: inline-block }
.pgwMenuCustom .pm-viewMore>ul { left: auto; right: 0 }
.pgwMenuCustom .pm-viewMore li { float: none }
.pgwMenuCustom .pm-viewMore span.icon, .pgwMenuCustom .pm-viewMore span.white { border-color: #fff transparent; border-style: solid; border- 8px 6px 0; margin-left: 3px; display: inline-block }
.pgwMenuCustom .pm-viewMore span.black { border-color: #000 transparent; border-style: solid; border- 8px 6px 0; margin-left: 3px; display: inline-block }
.mainlevel ul{ display:none; position:absolute;}
.mainlevel li{border-top:1px solid #fff;140px; float:none;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#3ba0fa,endColorStr=#1070c8); /*IE 6 7 8*/
background: -ms-linear-gradient(top, #3ba0fa, #1070c8); /* IE 10 */
background:-moz-linear-gradient(top,#3ba0fa,#1070c8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#3ba0fa), to(#1070c8));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3ba0fa), to(#1070c8)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #3ba0fa, #1070c8); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #3ba0fa, #1070c8); }
</style>
js代码：
/**
* PgwMenu - Version 2.0
*
* Copyright 2014, Jonathan M. Piat
* http://pgwjs.com - http://pagawa.com
*
* Released under the GNU GPLv3 license - http://opensource.org/licenses/gpl-3.0
*/
;(function($){
$.fn.pgwMenu = function(options) {
var defaults = {
mainClassName : 'pgwMenu',
dropDownLabel : '<span class="icon"></span>',
viewMoreEnabled : true,
viewMoreLabel : 'View more <span class="icon"></span>',
viewMoreMaxWidth : 480
};
if (this.length == 0) {
return this;
} else if(this.length > 1) {
this.each(function() {
$(this).pgwMenu(options);
});
return this;
}
var pgwMenu = this;
pgwMenu.plugin = this;
pgwMenu.config = {};
pgwMenu.resizeEvent = null;
pgwMenu.window = $(window);
// Init function
var init = function() {
// Merge user options with default configuration
pgwMenu.config = $.extend({}, defaults, options);
// Setup
setup();
pgwMenu.checkMenu();
// Resize trigger
pgwMenu.window.resize(function() {
pgwMenu.plugin.css('overflow', 'hidden');
clearTimeout(pgwMenu.resizeEvent);
pgwMenu.resizeEvent = setTimeout(function() {
pgwMenu.checkMenu();
}, 100);
});
pgwMenu.plugin.find('.pm-dropDown').click(function(e) {
pgwMenu.enableMobileDropDown();
e.stopPropagation();
});
pgwMenu.plugin.find('.pm-viewMore').click(function(e) {
pgwMenu.enableViewMoreDropDown();
e.stopPropagation();
});
$(document).click(function() {
pgwMenu.disableMobileDropDown();
pgwMenu.disableViewMoreDropDown();
});
};
// Setup
var setup = function() {
var wrapClass = pgwMenu.config.mainClassName;
var defaultClass = pgwMenu.plugin.attr('class');
if (defaultClass && defaultClass.indexOf('light') > -1) {
wrapClass += ' light';
}
pgwMenu.plugin.removeClass().addClass('pm-links');
pgwMenu.plugin.wrap('<div class="' + wrapClass + '"></div>');
pgwMenu.plugin = pgwMenu.plugin.parent();
pgwMenu.plugin.prepend('<div class="pm-dropDown"><a href="javascript:void(0)">' + pgwMenu.config.dropDownLabel + '</a></div>');
if (pgwMenu.config.viewMoreEnabled) {
pgwMenu.plugin.append('<div class="pm-viewMore" style="display:inline-block"><a href="javascript:void(0)">' + pgwMenu.config.viewMoreLabel + '</a><ul></ul></div>');
}
};
// Check menu
pgwMenu.checkMenu = function() {
var pluginMaxWidth = pgwMenu.plugin.width();
if (pgwMenu.config.viewMoreEnabled) {
var viewMoreLinkWidth = pgwMenu.plugin.find('.pm-viewMore').outerWidth(true);
}
function getContentWidth() {
var menuContentWidth = 0;
pgwMenu.plugin.find('.pm-links').removeClass('mobile').show();
pgwMenu.plugin.find('.pm-links > li').each(function() {
menuContentWidth += $(this).outerWidth(true);
});
return menuContentWidth;
}
function switchMenu(type) {
if (type == 'viewmore') {
var viewMoreMenuWidth = viewMoreLinkWidth;
pgwMenu.plugin.find('.pm-links').removeClass('mobile').show();
pgwMenu.plugin.find('.pm-viewMore > ul > li').remove();
pgwMenu.plugin.find('.pm-links > li').show().each(function() {
if (viewMoreMenuWidth + $(this).outerWidth(true) < pluginMaxWidth) {
viewMoreMenuWidth += $(this).outerWidth(true);
} else {
pgwMenu.plugin.find('.pm-viewMore > ul').append($(this).clone().show());
$(this).hide();
}
});
pgwMenu.plugin.find('.pm-dropDown, .pm-viewMore > ul').hide();
pgwMenu.plugin.find('.pm-viewMore').show();
} else if (type == 'dropdown') {
pgwMenu.plugin.find('.pm-links > li').show();
pgwMenu.plugin.find('.pm-links').addClass('mobile').hide();
pgwMenu.plugin.find('.pm-viewMore, .pm-viewMore > ul').hide();
pgwMenu.plugin.find('.pm-viewMore > ul > li').remove();
pgwMenu.plugin.find('.pm-dropDown').show();
} else {
pgwMenu.plugin.find('.pm-links > li').show();
pgwMenu.plugin.find('.pm-links').removeClass('mobile').show();
pgwMenu.plugin.find('.pm-dropDown, .pm-viewMore, .pm-viewMore > ul').hide();
pgwMenu.plugin.find('.pm-viewMore > ul > li').remove();
}
pgwMenu.plugin.find('.pm-dropDown > a, .pm-viewMore > a').removeClass('active');
}
if (getContentWidth() > pluginMaxWidth) {
if (pgwMenu.config.viewMoreEnabled && (pluginMaxWidth > pgwMenu.config.viewMoreMaxWidth)) {
switchMenu('viewmore');
} else {
switchMenu('dropdown');
}
} else {
switchMenu('normal');
}
pgwMenu.plugin.css('overflow', '');
};
// Enable view more drop down
pgwMenu.enableViewMoreDropDown = function() {
if (pgwMenu.plugin.find('.pm-viewMore > a').hasClass('active')) {
pgwMenu.disableViewMoreDropDown();
return false;
}
pgwMenu.plugin.find('.pm-viewMore > a').addClass('active');
pgwMenu.plugin.find('.pm-viewMore > ul').show();
};
// Disable view more drop down
pgwMenu.disableViewMoreDropDown = function() {
if (pgwMenu.plugin.find('.pm-viewMore > a').hasClass('active')) {
pgwMenu.plugin.find('.pm-viewMore > a').removeClass('active');
pgwMenu.plugin.find('.pm-viewMore > ul').hide();
}
};
// Enable mobile drop down
pgwMenu.enableMobileDropDown = function() {
if (pgwMenu.plugin.find('.pm-dropDown > a').hasClass('active')) {
pgwMenu.disableMobileDropDown();
return false;
}
pgwMenu.plugin.find('.pm-dropDown > a').addClass('active');
pgwMenu.plugin.find('.pm-links').show();
};
// Disable mobile drop down
pgwMenu.disableMobileDropDown = function() {
if (pgwMenu.plugin.find('.pm-dropDown > a').hasClass('active')) {
pgwMenu.plugin.find('.pm-dropDown > a').removeClass('active');
pgwMenu.plugin.find('.pm-links').hide();
}
};
// Menu initialization
init();
return this;
}
})(window.Zepto || window.jQuery);