|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>js彩色拼图导航下拉菜单</title> <style> /*默认样式：直接定义元素的样式*/ body{text-align:center;font-size:12px;font-family:微软雅黑, Tahoma, Verdana, Arial;font-weight:normal;color:#333333;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(/jscss/demoimg/201402/menu_ico1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico1.png");color:#000;} .M1Hover{background:url(/jscss/demoimg/201402/menu_hover_ico1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico1.png");color:#fff;} .M2Common{width:138px;height:75px;margin:12px 0px 0px -23px;} .M2{background:url(/jscss/demoimg/201402/menu_ico2.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico2.png");} .M2Hover{background:url(/jscss/demoimg/201402/menu_hover_ico2.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico2.png");} .M3Common{width:150px;height:63px;margin:24px 0px 0px -36px;} .M3{background:url(/jscss/demoimg/201402/menu_ico3.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico3.png");} .M3Hover{background:url(/jscss/demoimg/201402/menu_hover_ico3.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico3.png");} .M4Common{width:123px;height:54px;margin:33px 0px 0px -5px;} .M4{background:url(/jscss/demoimg/201402/menu_ico4.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico4.png");} .M4Hover{background:url(/jscss/demoimg/201402/menu_hover_ico4.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_hover_ico4.png");} .M5Common{width:121px;height:68px;margin-top:19px;} .M5{background:url(/jscss/demoimg/201402/menu_ico5.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/menu_ico5.png");} .M5Hover{background:url(/jscss/demoimg/201402/menu_hover_ico5.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/201402/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;} </style> <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="/">首 页</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="需求&报价" href="#">需求&报价</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.className = "M" + obj.index + "Common M" + obj.index + "Hover"; var dda = obj.getElementsByTagName("a")[0]; 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; 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> <div style="text-align:center;clear:both"><br> </div> </body> </html> |
|
|
