jQuery响应菜单插件PgwMenu特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery响应菜单插件PgwMenu特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery响应菜单插件PgwMenu</title>
<link rel="stylesheet" type="text/css" href="css/pgwmenu.min.css"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pgwmenu.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 	$('.pgwMenu').pgwMenu();
});
</script>

</head>

<body>
    <ul class="pgwMenu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#" target="_blank">Link 3</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#" target="_blank">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#" target="_blank">Link 3</a></li>

    </ul>

<p>通过调整浏览器大小查看效果</p>
</body>
</html>

JS代码(pgwmenu.js):

/** * PgwMenu - Version 1.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 ={
	dropDownLabel:'<span class="icon"></span>',mainClassName:'pgwMenu'}
;
	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 ={
}
;
	// Init function var init = function(){
	// Merge user options with default configuration pgwMenu.config = $.extend({
}
,defaults,options);
	// Setup createDropDown();
	pgwMenu.checkMenu();
	// Triggers $(window).resize(function(){
	pgwMenu.checkMenu();
}
);
	pgwMenu.plugin.find('.pmDropDown').click(function(e){
	pgwMenu.enableDropDown();
	e.stopPropagation();
}
);
	$(document).click(function(){
	pgwMenu.disableDropDown();
}
);
}
;
	// Create drop down var createDropDown = function(){
	var wrapClass = pgwMenu.config.mainClassName;
	var defaultClass = pgwMenu.plugin.attr('class');
	if (defaultClass && defaultClass.indexOf('light') > -1){
	wrapClass += ' light';
}
pgwMenu.plugin.removeClass();
	pgwMenu.plugin.wrap('<div class="' + wrapClass + '"></div>');
	pgwMenu.plugin = pgwMenu.plugin.parent();
	pgwMenu.plugin.prepend('<div class="pmDropDown"><a href="javascript:void(0)">' + pgwMenu.config.dropDownLabel + '</a></div>');
}
;
	// Check menu pgwMenu.checkMenu = function(){
	var menuMaxWidth = pgwMenu.plugin.width();
	function getContentWidth(){
	var menuContentWidth = 0;
	pgwMenu.plugin.find('ul').removeClass('mobile').show();
	pgwMenu.plugin.find('ul li').each(function(){
	menuContentWidth += $(this).width();
}
);
	return menuContentWidth;
}
function switchMenu(type){
	if (type == 'dropdown'){
	pgwMenu.plugin.find('ul').addClass('mobile').hide();
	pgwMenu.plugin.find('.pmDropDown').show();
}
else{
	pgwMenu.plugin.find('ul').removeClass('mobile').show();
	pgwMenu.plugin.find('.pmDropDown').hide();
}
pgwMenu.plugin.find('.pmDropDown a').removeClass('active');
}
if (getContentWidth() > menuMaxWidth){
	switchMenu('dropdown');
}
else{
	switchMenu('normal');
}
}
;
	// Enable drop down pgwMenu.enableDropDown = function(){
	if (pgwMenu.plugin.find('.pmDropDown a').hasClass('active')){
	pgwMenu.disableDropDown();
	return false;
}
pgwMenu.plugin.find('.pmDropDown a').addClass('active');
	pgwMenu.plugin.find('ul').show();
}
;
	// Disable drop down pgwMenu.disableDropDown = function(){
	if (pgwMenu.plugin.find('.pmDropDown a').hasClass('active')){
	pgwMenu.plugin.find('.pmDropDown a').removeClass('active');
	pgwMenu.plugin.find('ul').hide();
}
}
;
	// Menu initialization init();
	return this;
}
}
)(window.Zepto || window.jQuery);

JS代码(pgwmenu.min.js):

/** * PgwMenu - Version 1.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(a){
	a.fn.pgwMenu=function(c){
	var d={
	dropDownLabel:'<span class="icon"></span>',mainClassName:"pgwMenu"}
;
	if(this.length==0){
	return this}
else{
	if(this.length>1){
	this.each(function(){
	a(this).pgwMenu(c)}
);
	return this}
}
var b=this;
	b.plugin=this;
	b.config={
}
;
	var f=function(){
	b.config=a.extend({
}
,d,c);
	e();
	b.checkMenu();
	a(window).resize(function(){
	b.checkMenu()}
);
	b.plugin.find(".pmDropDown").click(function(g){
	b.enableDropDown();
	g.stopPropagation()}
);
	a(document).click(function(){
	b.disableDropDown()}
)}
;
	var e=function(){
	var h=b.config.mainClassName;
	var g=b.plugin.attr("class");
	if(g&&g.indexOf("light")>-1){
	h+=" light"}
b.plugin.removeClass();
	b.plugin.wrap('<div class="'+h+'"></div>');
	b.plugin=b.plugin.parent();
	b.plugin.prepend('<div class="pmDropDown"><a href="javascript:void(0)">'+b.config.dropDownLabel+"</a></div>")}
;
	b.checkMenu=function(){
	var i=b.plugin.width();
	function g(){
	var j=0;
	b.plugin.find("ul").removeClass("mobile").show();
	b.plugin.find("ul li").each(function(){
	j+=a(this).width()}
);
	return j}
function h(j){
	if(j=="dropdown"){
	b.plugin.find("ul").addClass("mobile").hide();
	b.plugin.find(".pmDropDown").show()}
else{
	b.plugin.find("ul").removeClass("mobile").show();
	b.plugin.find(".pmDropDown").hide()}
b.plugin.find(".pmDropDown a").removeClass("active")}
if(g()>i){
	h("dropdown")}
else{
	h("normal")}
}
;
	b.enableDropDown=function(){
	if(b.plugin.find(".pmDropDown a").hasClass("active")){
	b.disableDropDown();
	return false}
b.plugin.find(".pmDropDown a").addClass("active");
	b.plugin.find("ul").show()}
;
	b.disableDropDown=function(){
	if(b.plugin.find(".pmDropDown a").hasClass("active")){
	b.plugin.find(".pmDropDown a").removeClass("active");
	b.plugin.find("ul").hide()}
}
;
	f();
	return this}
}
)(window.Zepto||window.jQuery);

CSS代码(pgwmenu-custom.css):

/** * PgwMenu - Version 1.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 */
.pgwMenu{background:#f1941c;height:40px;position:relative;list-style:none;}
.pgwMenu ul{list-style:none;white-space:nowrap;margin:0;padding:0;}
.pgwMenu ul.mobile{background:#f1941c;box-shadow:2px 2px 4px #777;position:absolute;left:0;top:100%;z-index:1000;}
.pgwMenu ul.mobile li{display:block;clear:both;width:175px;}
.pgwMenu li{float:left;font-size:0.9rem;}
.pgwMenu a{display:block;color:#fff;line-height:40px;padding:0 12px;text-decoration:none;}
.pgwMenu a.selected{background:#e5601d;}
.pgwMenu li a:hover{background:#e86f2e;}
.pgwMenu .pmDropDown{display:none;}
.pgwMenu .pmDropDown a{display:inline-block;background:#e86F2e;}
.pgwMenu .pmDropDown a.active{background:#e5601d;}
.pgwMenu .pmDropDown span.icon,.pgwMenu .pmDropDown span.black{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvgAADr4B6kKxwAAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABpSURBVEhL7ZPLCcAwDEM9jefI/ks1Hyj2QbiGSLcKHggl8sEktjTc/WGyZxo6YKAbrFzFoav3/hdhmsrlijBN5XJFmKZyuSJMU7lcsfV/kIN0FRJgyACGDGDIAIYMpK8CHt6iG6xZhY0JIJ+6AHGbUFsAAAAASUVORK5CYII=) no-repeat;display:block;height:22px;width:22px;margin:9px 5px;}
.pgwMenu .pmDropDown span.white{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABKSURBVEhL7ZOxDQAwCMN6O4/T0tmjsxHJDB4yROJ0dz3s1BRHEi2OTREBpQFKA5QGKA3m7IP8RKeIgNIApQFKA5QGc/ZBfkJTdF0oUafLBAFNbAAAAABJRU5ErkJggg==) no-repeat;display:block;height:22px;width:22px;margin:9px 5px;}

CSS代码(pgwmenu.css):

/** * PgwMenu - Version 1.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 */
.pgwMenu{background:#333;height:40px;position:relative;list-style:none;}
.pgwMenu.light{background:#d5d5d5;}
.pgwMenu ul{list-style:none;white-space:nowrap;margin:0;padding:0;}
.pgwMenu ul.mobile{background:#333;box-shadow:2px 2px 4px #777;position:absolute;left:0;top:100%;z-index:1000;}
.pgwMenu.light ul.mobile{background:#d5d5d5;}
.pgwMenu ul.mobile li{display:block;clear:both;width:175px;}
.pgwMenu li{float:left;font-size:0.9rem;}
.pgwMenu a{display:block;color:#fff;line-height:40px;padding:0 12px;text-decoration:none;}
.pgwMenu.light a{color:#000;}
.pgwMenu a.selected{background:#777;}
.pgwMenu.light a.selected{background:#bbb;}
.pgwMenu li a:hover{background:#666;}
.pgwMenu.light li a:hover{background:#c5c5c5;}
.pgwMenu .pmDropDown{display:none;}
.pgwMenu .pmDropDown a{display:inline-block;background:#777;}
.pgwMenu .pmDropDown a.active{background:#666;}
.pgwMenu.light .pmDropDown a{background:#c5c5c5;}
.pgwMenu.light .pmDropDown a.active{background:#bbb;}
.pgwMenu .pmDropDown span.icon,.pgwMenu .pmDropDown span.white{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABKSURBVEhL7ZOxDQAwCMN6O4/T0tmjsxHJDB4yROJ0dz3s1BRHEi2OTREBpQFKA5QGKA3m7IP8RKeIgNIApQFKA5QGc/ZBfkJTdF0oUafLBAFNbAAAAABJRU5ErkJggg==) no-repeat;display:block;height:22px;width:22px;margin:9px 5px;}
.pgwMenu.light .pmDropDown span.icon,.pgwMenu .pmDropDown span.black{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvgAADr4B6kKxwAAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABpSURBVEhL7ZPLCcAwDEM9jefI/ks1Hyj2QbiGSLcKHggl8sEktjTc/WGyZxo6YKAbrFzFoav3/hdhmsrlijBN5XJFmKZyuSJMU7lcsfV/kIN0FRJgyACGDGDIAIYMpK8CHt6iG6xZhY0JIJ+6AHGbUFsAAAAASUVORK5CYII=) no-repeat;display:block;height:22px;width:22px;margin:9px 5px;}

CSS代码(pgwmenu.min.css):

/** * PgwMenu - Version 1.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 */
.pgwMenu{background:#333;height:40px;position:relative;list-style:none}
.pgwMenu.light{background:#d5d5d5}
.pgwMenu ul{list-style:none;white-space:nowrap;margin:0;padding:0}
.pgwMenu ul.mobile{background:#333;box-shadow:2px 2px 4px #777;position:absolute;left:0;top:100%;z-index:1000}
.pgwMenu.light ul.mobile{background:#d5d5d5}
.pgwMenu ul.mobile li{display:block;clear:both;width:175px}
.pgwMenu li{float:left;font-size:.9rem}
.pgwMenu a{display:block;color:#fff;line-height:40px;padding:0 12px;text-decoration:none}
.pgwMenu.light a{color:#000}
.pgwMenu a.selected{background:#777}
.pgwMenu.light a.selected{background:#bbb}
.pgwMenu li a:hover{background:#666}
.pgwMenu.light li a:hover{background:#c5c5c5}
.pgwMenu .pmDropDown{display:none}
.pgwMenu .pmDropDown a{display:inline-block;background:#777}
.pgwMenu .pmDropDown a.active{background:#666}
.pgwMenu.light .pmDropDown a{background:#c5c5c5}
.pgwMenu.light .pmDropDown a.active{background:#bbb}
.pgwMenu .pmDropDown span.icon,.pgwMenu .pmDropDown span.white{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABKSURBVEhL7ZOxDQAwCMN6O4/T0tmjsxHJDB4yROJ0dz3s1BRHEi2OTREBpQFKA5QGKA3m7IP8RKeIgNIApQFKA5QGc/ZBfkJTdF0oUafLBAFNbAAAAABJRU5ErkJggg==) no-repeat;display:block;height:22px;width:22px;margin:9px 5px}
.pgwMenu.light .pmDropDown span.icon,.pgwMenu .pmDropDown span.black{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvgAADr4B6kKxwAAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABpSURBVEhL7ZPLCcAwDEM9jefI/ks1Hyj2QbiGSLcKHggl8sEktjTc/WGyZxo6YKAbrFzFoav3/hdhmsrlijBN5XJFmKZyuSJMU7lcsfV/kIN0FRJgyACGDGDIAIYMpK8CHt6iG6xZhY0JIJ+6AHGbUFsAAAAASUVORK5CYII=) no-repeat;display:block;height:22px;width:22px;margin:9px 5px}

附件:下载该文件资源,减少时间成本(增值服务)