jquery动态导航三

html代码：

<body>
<h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1>
<p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p>

<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>

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

css代码：

.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);

相关阅读:
react-router刷新页面Cannot GET 问题
react学习之弹出层
react学习之js-xlsx导入和导出excel表格
c#串口通信并处理接收的多个参数
react与微信小程序
promise知识点小结
汇编命令小记
Firebase-config 在android中的使用
python:html元素解析
Toast实现源码解析

原文地址：https://www.cnblogs.com/tuhailin/p/5627222.html