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

js彩色拼图导航下拉菜单特效代码

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

以下是 js彩色拼图导航下拉菜单特效代码 的示例演示效果:

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

部分效果截图:

js彩色拼图导航下拉菜单特效代码

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>js彩色拼图导航下拉菜单</title>
<link type="text/css" rel="stylesheet" href="css/NewDefault.css">
<style type="text/css">
body{background:#;}
.downMenu ul li a{color:white!important;font-size:14px;height:24px;letter-spacing:4px;border-bottom:1px solid #fff;border-left:none;border-right:none;}
#divDown2 ul li a{background:#EB8932;color:white!important;width:102px;}
#divDown2 ul li a:hover{background:#F6C370;color:#000!important;}
#divDown3 ul li a{background:#91BD41;color:white!important;width:78px;}
#divDown3 ul li a:hover{background:#B8DA6A;color:#000!important;}
#divDown4 ul li a{background:#FEA901;color:white!important;width:114px;}
#divDown4 ul li a:hover{background:#FDE374;color:#000!important;}
#divDown5 ul li a{background:#CA699C;color:white!important;width:115px;}
#divDown5 ul li a:hover{background:#DDA6BD;color:#000!important;}
</style>
</head>
<body>

<div id="navmaster">
	<ul>
		<li id="ctl01_liIndex" class="M1Common M1">
			<div style="padding-top:27px;"><a href="#">首&nbsp;页</a></div>
		</li>
		<li id="ctl01_liQCenter" class="M2Common M2">
			<div style="padding-top:44px;"><a title="问卷中心" href="#">问卷中心</a><span class="bordCss bordBottomCssN"></span></div>
		</li>
		<li id="ctl01_liPrice" class="M3Common M3">
			<div style="padding-top:32px;"><a style="padding:9px 0 0px 21px;" href="#">自助服务</a></div>
		</li>
		<li id="ctl01_liUseCase" class="M4Common M4">
			<div style="padding-top:23px;"><a href="#">样本服务</a><span class="bordCss bordBottomCssN"></span></div>
		</li>
		<li id="ctl01_liCustomer" class="M5Common M5">
			<div style="padding-top:37px;text-align:left;padding-left:14px;"><a style="" href="#">典型应用</a></div>
		</li>
	</ul>
</div>

    
<!--下拉菜单2开始-->
<div id="divDown2" class="downMenu" pdleft="23" style="display:none;z-index:10999;position:absolute;">
	<ul>
		<li><a title="公开问卷" href="#" style="border-top:1px solid #fff;">公开问卷</a> </li>
		<li><a title="问卷调查模板" href="#">问卷模板</a> </li>
		<li><a title="有奖调查" href="#" target="_blank">有奖调查</a> </li>
		<li><a title="热门测评" href="#">热门测评</a> </li>
	</ul>
</div>
<!--下拉菜单2结束--> 
    
<!--下拉菜单4开始-->
<div id="divDown4" class="downMenu" pdleft="5" style="display:none;z-index:10999;left:933px;position:absolute;top:130px;">
	<ul>
		<li><a title="服务介绍" href="#" style="border-top:1px solid #fff;">服务介绍</a> </li>
		<li><a title="服务价格" href="#">服务价格</a></li>
		<li><a title="需求&amp;报价" href="#">需求&amp;报价</a></li>
		<li><a title="流程说明" href="#">流程说明</a></li>
		<li><a title="流程说明" href="#">成功案例</a></li>
	</ul>
</div>
<!--下拉菜单4结束--> 
    
<script type="text/javascript">
var navmaster = document.getElementById("navmaster");
var lis = navmaster.getElementsByTagName("li");
var hrefas = navmaster.getElementsByTagName("a");
for (var i = 0; i < lis.length; i++) {
	lis[i].index = i + 1;
	if (lis[i].className.toLowerCase().indexOf("hover") > -1) {
		hoverLi(lis[i]);lis[i].isHover = true;
	}
	lis[i].onmouseover = function () {
		hoverLi(this); sb_setmenunav('divDown' + this.index, true, this);
	}
	lis[i].onmouseout = function () {
		sb_setmenunav('divDown' + this.index, false, this); unHoverLi(this);
	}
	lis[i].onclick = function () {
		var href = this.getElementsByTagName("a")[0].href;
		if (href)
			window.location = href;
	}

}
function getSpanByClassName(ele, className) {
	var spans = ele.getElementsByTagName("span");
	for (var i = 0; i < spans.length; i++) {
		var cName = spans[i].className || "";
		if (cName.toLowerCase() == className.toLowerCase()) {
			return spans[i];
		}
	}
}
function hoverLi(obj) {
	// obj.style.background = 'url(/images/MasterNew/menu_hover_ico' + obj.index + '.png) top left'; obj.style.color = '#fff';
	obj.className = "M" + obj.index + "Common M" + obj.index + "Hover";
	var dda = obj.getElementsByTagName("a")[0];
	//if(!dda.prevColor && dda.style.color!="#ffffff")dda.prevColor = dda.style.color;
	dda.style.color = "#ffffff";
	var span = getSpanByClassName(obj, "bordCss bordBottomCssN") || obj.spanCursor;
	if (span) {
		span.className = "bordCss bordBottomCssNF";
		obj.spanCursor = span;
	}
}
function unHoverLi(obj) {
	if (!obj.isHover) {
		obj.className = "M" + obj.index + "Common M" + obj.index;
		var dda = obj.getElementsByTagName("a")[0];
		dda.style.color = "";
		if (obj.spanCursor) obj.spanCursor.className = "bordCss bordBottomCssN";
	}
}
function openwindowSup(url, name, iWidth, iHeight) {

	var url;                                 //转向网页的地址;
	var name;                           //网页名称，可为空;
	var iWidth;                          //弹出窗口的宽度;
	var iHeight;                        //弹出窗口的高度;
	var iTop = (window.screen.availHeight + 30 - iHeight) / 2;       //获得窗口的垂直位置;
	var iLeft = (window.screen.availWidth + 208 - iWidth) / 2;           //获得窗口的水平位置;
	var param = 'height=' + iHeight + ',width=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',border=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes,location=no,status=no';
	var o = window.open(url, name, param);
	o.focus();
}

function getCoordsNav(el) {
	var box = el.getBoundingClientRect(),
	doc = el.ownerDocument,
	body = doc.body,
	html = doc.documentElement,
	clientTop = html.clientTop || body.clientTop || 0,
	clientLeft = html.clientLeft || body.clientLeft || 0,
	top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop) - clientTop,
	left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
	return { 'top': top, 'left': left };
};
function sb_setmenunav(name, vis, obj) {
	var d = document.getElementById(name); //要显示隐藏的div
	if (!d) return;
	var padLeft = parseInt(d.getAttribute("pdLeft") || 0);
	if (vis) {
		if (d.timeArray) {
			window.clearTimeout(d.timeArray);
			d.timeArray = 0;
		}
		d.style.display = "block";
		if (!d.onmouseover) {
			d.onmouseover = function () {
				sb_setmenunav(name, true);
			}
			d.onmouseout = function () {
				sb_setmenunav(name, false);
				unHoverLi(obj);
			}
		}
		if (obj) {
			var objp = obj;
			if (objp.parentNode.tagName.toLowerCase() == "li")
				objp = obj.parentNode;
			var xy = getCoordsNav(objp);
			var xias = xy.left;
			//alert(d.offsetWidth);
			var yias = xy.top + objp.offsetHeight;
			padLeft = padLeft || 0;
			d.style.left = xias + padLeft + "px";
			d.style.top = yias + "px"; //;
			
		}
	}
	if (obj && obj.tagName.toLowerCase() == "li") {
		d.needSaveClass = obj;
		d.prevClass = obj.className;

	}
	else if (d.needSaveClass) {
		hoverLi(d.needSaveClass);
	}
	if (!vis) {//延时隐藏，可以移动上去
		if (d.spanCursor) d.spanCursor.className = "bordCss bordBottomCssN";
		d.timeArray = window.setTimeout(function () {
			d.style.display = "none"; d.style.height = "";
		}, 100);
	}

}
</script>
</body>
</html>

CSS代码(NewDefault.css):

/*============================默认样式：直接定义元素的样式=======================================*/
body{text-align:center;font-size:12px;font-family:'宋体',ncursive,Arial,Verdana,Geneva,sans-serif;font-weight:normal;color:#444444;margin-top:0;background-color:#f5f5f5;}
dl,dt,dd,ul,li,ol,p,form,img{padding:0px;margin:0px;list-style:none;border:none;}
a,a:link,a:active{color:#3D81EE;text-decoration:none;}
a:hover{color:#F90;text-decoration:none;}
a img{border:0;}
/*导航*/
#navmaster{margin:0 auto;width:620px;padding:0px;}
#navmaster ul{list-style-type:none;margin:auto;padding:0px;}
#navmaster ul li{display:inline;float:left;padding:0px;cursor:pointer;font-weight:700;}
#navmaster li a{font-size:16px;color:#454545;letter-spacing:2px;font-family:微软雅黑,Tahoma,Verdana,Arial;}
#navmaster li a:hover{color:#fff;}
#navmaster li.hover a{color:#fff;}
.M1Common{width:109px;height:58px;margin:29px 0px 0px 0px;}
.M1{background:url(../images/menu_ico1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_ico1.png");color:#000;}
.M1Hover{background:url(../images/menu_hover_ico1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_hover_ico1.png");color:#fff;}
.M2Common{width:138px;height:75px;margin:12px 0px 0px -23px;}
.M2{background:url(../images/menu_ico2.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_ico2.png");}
.M2Hover{background:url(../images/menu_hover_ico2.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_hover_ico2.png");}
.M3Common{width:150px;height:63px;margin:24px 0px 0px -36px;}
.M3{background:url(../images/menu_ico3.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_ico3.png");}
.M3Hover{background:url(../images/menu_hover_ico3.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_hover_ico3.png");}
.M4Common{width:123px;height:54px;margin:33px 0px 0px -5px;}
.M4{background:url(../images/menu_ico4.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_ico4.png");}
.M4Hover{background:url(../images/menu_hover_ico4.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_hover_ico4.png");}
.M5Common{width:121px;height:68px;margin-top:19px;}
.M5{background:url(../images/menu_ico5.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_ico5.png");}
.M5Hover{background:url(../images/menu_hover_ico5.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu_hover_ico5.png");}
/***只用于首页*****/
.downMenu ul{padding:0;margin:0;}
.downMenu ul li{margin-top:0;}
.downMenu ul li a{padding-bottom:0;padding-top:7px;margin:0;cursor:pointer;background:#e8ecf2;color:#205fa2! important;text-decoration:none;display:inline-block;height:22px;width:80px;border:1px #c2d3ed solid;border-top:none;}
/*首页三角形样式*/
.bordCss{height:0;width:0;overflow:hidden;font-size:0;line-height:0;border-color:transparent transparent transparent #FF9900;border-style:dashed dashed dashed solid;border-width:5px;border-right-width:0;display:inline-block;margin:2px 2px 0 0;}
.bordCssGreen{border-color:transparent transparent transparent #26850d;margin:2px 3px 0 0;}
.bordBottomCss{border-color:#FF9900 transparent transparent transparent;border-style:solid dashed dashed dashed;border-width:5px;border-bottom-width:0;margin:0;}
.bordBottomCssN{border-style:solid dashed dashed dashed;border-color:#333333 transparent transparent transparent;border-width:3px;border-bottom-width:0;margin:0 0 4px 2px;}
.bordBottomCssNF{border-style:solid dashed dashed dashed;border-color:#ffffff transparent transparent transparent;border-width:3px;border-bottom-width:0;margin:0 0 4px 2px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
40.16 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
40.16 KB
立即下载
柳琼
了解
打赏作者 鼓励作者
Html Js 菜单导航特效4
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章