经验分享程序开发文档资料数据资源其它资源

jQuery自适应窗口大小导航菜单特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自适应窗口大小导航菜单特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery自适应窗口大小导航菜单特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自适应窗口大小导航菜单</title>

<!--必要样式-->
<link rel="stylesheet" href="css/pgwmenu.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 { background: #f1941c; 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; width: 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; width: 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; width: 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-width: 8px 6px 0; margin-left: 3px; display: inline-block }
.pgwMenuCustom .pm-viewMore span.black { border-color: #000 transparent; border-style: solid; border-width: 8px 6px 0; margin-left: 3px; display: inline-block }
</style>
</head>

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

<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>
</body>
</html>

JS代码(pgwmenu.min.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(a){
	a.fn.pgwMenu=function(d){
	var e={
	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(){
	a(this).pgwMenu(d)}
);
	return this}
}
var c=this;
	c.plugin=this;
	c.config={
}
;
	c.resizeEvent=null;
	c.window=a(window);
	var f=function(){
	c.config=a.extend({
}
,e,d);
	b();
	c.checkMenu();
	c.window.resize(function(){
	c.plugin.css("overflow","hidden");
	clearTimeout(c.resizeEvent);
	c.resizeEvent=setTimeout(function(){
	c.checkMenu()}
,100)}
);
	c.plugin.find(".pm-dropDown").click(function(g){
	c.enableMobileDropDown();
	g.stopPropagation()}
);
	c.plugin.find(".pm-viewMore").click(function(g){
	c.enableViewMoreDropDown();
	g.stopPropagation()}
);
	a(document).click(function(){
	c.disableMobileDropDown();
	c.disableViewMoreDropDown()}
)}
;
	var b=function(){
	var h=c.config.mainClassName;
	var g=c.plugin.attr("class");
	if(g&&g.indexOf("light")>-1){
	h+=" light"}
c.plugin.removeClass().addClass("pm-links");
	c.plugin.wrap('<div class="'+h+'"></div>');
	c.plugin=c.plugin.parent();
	c.plugin.prepend('<div class="pm-dropDown"><a href="javascript:void(0)">'+c.config.dropDownLabel+"</a></div>");
	if(c.config.viewMoreEnabled){
	c.plugin.append('<div class="pm-viewMore" style="display:inline-block"><a href="javascript:void(0)">'+c.config.viewMoreLabel+"</a><ul></ul></div>")}
}
;
	c.checkMenu=function(){
	var j=c.plugin.width();
	if(c.config.viewMoreEnabled){
	var h=c.plugin.find(".pm-viewMore").width()}
function g(){
	var k=0;
	c.plugin.find(".pm-links").removeClass("mobile").show();
	c.plugin.find(".pm-links > li").each(function(){
	k+=a(this).width()}
);
	return k}
function i(l){
	if(l=="viewmore"){
	var k=h;
	c.plugin.find(".pm-links").removeClass("mobile").show();
	c.plugin.find(".pm-viewMore > ul > li").remove();
	c.plugin.find(".pm-links > li").show().each(function(){
	if(k+a(this).width()<j){
	k+=a(this).width()}
else{
	c.plugin.find(".pm-viewMore > ul").append(a(this).clone().show());
	a(this).hide()}
}
);
	c.plugin.find(".pm-dropDown,.pm-viewMore > ul").hide();
	c.plugin.find(".pm-viewMore").show()}
else{
	if(l=="dropdown"){
	c.plugin.find(".pm-links > li").show();
	c.plugin.find(".pm-links").addClass("mobile").hide();
	c.plugin.find(".pm-viewMore,.pm-viewMore > ul").hide();
	c.plugin.find(".pm-viewMore > ul > li").remove();
	c.plugin.find(".pm-dropDown").show()}
else{
	c.plugin.find(".pm-links > li").show();
	c.plugin.find(".pm-links").removeClass("mobile").show();
	c.plugin.find(".pm-dropDown,.pm-viewMore,.pm-viewMore > ul").hide();
	c.plugin.find(".pm-viewMore > ul > li").remove()}
}
c.plugin.find(".pm-dropDown > a,.pm-viewMore > a").removeClass("active")}
if(g()>j){
	if(c.config.viewMoreEnabled&&(j>c.config.viewMoreMaxWidth)){
	i("viewmore")}
else{
	i("dropdown")}
}
else{
	i("normal")}
c.plugin.css("overflow","")}
;
	c.enableViewMoreDropDown=function(){
	if(c.plugin.find(".pm-viewMore > a").hasClass("active")){
	c.disableViewMoreDropDown();
	return false}
c.plugin.find(".pm-viewMore > a").addClass("active");
	c.plugin.find(".pm-viewMore > ul").show()}
;
	c.disableViewMoreDropDown=function(){
	if(c.plugin.find(".pm-viewMore > a").hasClass("active")){
	c.plugin.find(".pm-viewMore > a").removeClass("active");
	c.plugin.find(".pm-viewMore > ul").hide()}
}
;
	c.enableMobileDropDown=function(){
	if(c.plugin.find(".pm-dropDown > a").hasClass("active")){
	c.disableMobileDropDown();
	return false}
c.plugin.find(".pm-dropDown > a").addClass("active");
	c.plugin.find(".pm-links").show()}
;
	c.disableMobileDropDown=function(){
	if(c.plugin.find(".pm-dropDown > a").hasClass("active")){
	c.plugin.find(".pm-dropDown > a").removeClass("active");
	c.plugin.find(".pm-links").hide()}
}
;
	f();
	return this}
}
)(window.Zepto||window.jQuery);

CSS代码(pgwmenu.css):

/** * 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 */
.pgwMenu{background:#333;height:40px;position:relative;list-style:none;}
.pgwMenu ul{list-style:none;white-space:nowrap;margin:0;padding:0;}
.pgwMenu li{float:left;}
.pgwMenu li a:hover{background:#666;text-decoration:none;}
.pgwMenu a{display:block;color:#fff;line-height:40px;padding:0 12px;text-decoration:none;}
.pgwMenu a.selected{background:#777;}
.pgwMenu .pm-links.mobile,.pgwMenu .pm-viewMore > ul{background:#333;box-shadow:2px 2px 4px #777;position:absolute;left:0;top:100%;z-index:1000;}
.pgwMenu .pm-viewMore{display:none;position:relative;}
.pgwMenu .pm-viewMore > a{display:inline-block;}
.pgwMenu .pm-viewMore > ul{left:auto;right:0;}
.pgwMenu .pm-viewMore li{float:none;}
.pgwMenu .pm-viewMore span.icon,.pgwMenu .pm-viewMore span.white{border-color:#fff transparent;border-style:solid;border-width:8px 6px 0;margin-left:3px;display:inline-block;}
.pgwMenu.light .pm-viewMore span.icon,.pgwMenu .pm-viewMore span.black{border-color:#000 transparent;border-style:solid;border-width:8px 6px 0;margin-left:3px;display:inline-block;}
.pgwMenu .pm-links.mobile li,.pgwMenu .pm-viewMore > ul > li{display:block;clear:both;width:175px;}
.pgwMenu .pm-dropDown,.pgwMenu .pm-viewMore,.pgwMenu .pm-viewMore > ul{display:none;}
.pgwMenu .pm-dropDown a{display:inline-block;background:#777;}
.pgwMenu .pm-dropDown a.active,.pgwMenu .pm-viewMore a.active{background:#666;}
.pgwMenu .pm-dropDown span.icon,.pgwMenu .pm-dropDown 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 .pm-dropDown span.icon,.pgwMenu .pm-dropDown 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.light{background:#ddd;}
.pgwMenu.light .pm-viewMore > ul{background-color:#ddd;}
.pgwMenu.light .pm-links.mobile{background:#ddd;}
.pgwMenu.light li a:hover{background:#d0d0d0;}
.pgwMenu.light a{color:#000;}
.pgwMenu.light a.selected{background:#c5c5c5;}
.pgwMenu.light .pm-dropDown a{background:#c5c5c5;}
.pgwMenu.light .pm-dropDown a.active,.pgwMenu.light .pm-viewMore a.active{background:#d0d0d0;}
.pgwMenu.light .pm-dropDown a.active{background:#bbb;}
.pgwMenuCustom{background-color:#fff;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
37.91 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
37.91 KB
立即下载
梅咏
了解
打赏作者 鼓励作者
Html Js 菜单导航特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章