chunzhisu

chunzhisu

关注
发信
关注(28)粉丝(399)

js个性拼图样式的下拉导航菜单代码


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>js彩色拼图导航下拉菜单</title>
  5. <style>
  6. /*默认样式：直接定义元素的样式*/
  7. body{text-align:center;font-size:12px;font-family:微软雅黑, Tahoma, Verdana, Arial;font-weight:normal;color:#333333;margin-top:0;background-color:#f5f5f5;}
  8. dl, dt, dd, ul, li, ol, p, form, img{padding:0px;margin:0px;list-style:none;border:none;}
  9. a, a:link, a:active{color:#3D81EE;text-decoration:none;}
  10. a:hover{color:#F90;text-decoration:none;}
  11. a img{border:0;}
  12. #navmaster{margin:0 auto;width:620px;padding:0px;}
  13. #navmaster ul{list-style-type:none;margin:auto;padding:0px;}
  14. #navmaster ul li{display:inline;float:left;padding:0px;cursor:pointer;font-weight:700;}
  15. #navmaster li a{font-size:16px;color:#454545;letter-spacing:2px;font-family:微软雅黑, Tahoma, Verdana, Arial;}
  16. #navmaster li a:hover{color:#fff;}
  17. #navmaster li.hover a{color:#fff;}
  18. .M1Common{width:109px;height:58px;margin:29px 0px 0px 0px;}
  19. .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;}
  20. .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;}
  21. .M2Common{width:138px;height:75px;margin:12px 0px 0px -23px;}
  22. .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");}
  23. .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");}
  24. .M3Common{width:150px;height:63px;margin:24px 0px 0px -36px;}
  25. .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");}
  26. .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");}
  27. .M4Common{width:123px;height:54px;margin:33px 0px 0px -5px;}
  28. .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");}
  29. .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");}
  30. .M5Common{width:121px;height:68px;margin-top:19px;}
  31. .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");}
  32. .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");}
  33. /*只用于首页*/
  34. .downMenu ul{padding:0;margin:0;}
  35. .downMenu ul li{margin-top:0;}
  36. .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;}
  37. /*首页三角形样式*/
  38. .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;}
  39. .bordCssGreen{border-color:transparent transparent transparent #26850d;margin:2px 3px 0 0;}
  40. .bordBottomCss{border-color:#FF9900 transparent transparent transparent;border-style:solid dashed dashed dashed;border-width:5px;border-bottom-width:0;margin:0;}
  41. .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;}
  42. .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;}
  43. </style>
  44. <style type="text/css">
  45. body{background:#;}
  46. .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;}
  47. #divDown2 ul li a{background:#EB8932;color:white!important;width:102px;}
  48. #divDown2 ul li a:hover{background:#F6C370;color:#000!important;}
  49. #divDown3 ul li a{background:#91BD41;color:white!important;width:78px;}
  50. #divDown3 ul li a:hover{background:#B8DA6A;color:#000!important;}
  51. #divDown4 ul li a{background:#FEA901;color:white!important;width:114px;}
  52. #divDown4 ul li a:hover{background:#FDE374;color:#000!important;}
  53. #divDown5 ul li a{background:#CA699C;color:white!important;width:115px;}
  54. #divDown5 ul li a:hover{background:#DDA6BD;color:#000!important;}
  55. </style>
  56. </head>
  57. <body>
  58. <div id="navmaster">
  59.     <ul>
  60.         <li id="ctl01_liIndex" class="M1Common M1">
  61.             <div style="padding-top:27px;"><a href="/">首&nbsp;页</a></div>
  62.         </li>
  63.         <li id="ctl01_liQCenter" class="M2Common M2">
  64.             <div style="padding-top:44px;"><a title="问卷中心" href="#">问卷中心</a><span class="bordCss bordBottomCssN"></span></div>
  65.         </li>
  66.         <li id="ctl01_liPrice" class="M3Common M3">
  67.             <div style="padding-top:32px;"><a style="padding:9px 0 0px 21px;" href="#">自助服务</a></div>
  68.         </li>
  69.         <li id="ctl01_liUseCase" class="M4Common M4">
  70.             <div style="padding-top:23px;"><a href="#">样本服务</a><span class="bordCss bordBottomCssN"></span></div>
  71.         </li>
  72.         <li id="ctl01_liCustomer" class="M5Common M5">
  73.             <div style="padding-top:37px;text-align:left;padding-left:14px;"><a style="" href="#">典型应用</a></div>
  74.         </li>
  75.     </ul>
  76. </div>

  78. <div id="divDown2" class="downMenu" pdleft="23" style="display:none;z-index:10999;position:absolute;">
  79.     <ul>
  80.         <li><a title="公开问卷" href="#" style="border-top:1px solid #fff;">公开问卷</a> </li>
  81.         <li><a title="问卷调查" href="#">问卷模板</a> </li>
  82.         <li><a title="有奖调查" href="#" target="_blank">有奖调查</a> </li>
  83.         <li><a title="热门测评" href="#">热门测评</a> </li>
  84.     </ul>
  85. </div>


  88. <div id="divDown4" class="downMenu" pdleft="5" style="display:none;z-index:10999;left:933px;position:absolute;top:130px;">
  89.     <ul>
  90.         <li><a title="服务介绍" href="#" style="border-top:1px solid #fff;">服务介绍</a> </li>
  91.         <li><a title="服务价格" href="#">服务价格</a></li>
  92.         <li><a title="需求&报价" href="#">需求&报价</a></li>
  93.         <li><a title="流程说明" href="#">流程说明</a></li>
  94.         <li><a title="流程说明" href="#">成功案例</a></li>
  95.     </ul>
  96. </div>

  98. <script type="text/javascript">
  99. var navmaster = document.getElementById("navmaster");
  100. var lis = navmaster.getElementsByTagName("li");
  101. var hrefas = navmaster.getElementsByTagName("a");
  102. for (var i = 0; i < lis.length; i++) {
  103.     lis[i].index = i + 1;
  104.     if (lis[i].className.toLowerCase().indexOf("hover") > -1) {
  105.         hoverLi(lis[i]);lis[i].isHover = true;
  106.     }
  107.     lis[i].onmouseover = function () {
  108.         hoverLi(this); sb_setmenunav('divDown' + this.index, true, this);
  109.     }
  110.     lis[i].onmouseout = function () {
  111.         sb_setmenunav('divDown' + this.index, false, this); unHoverLi(this);
  112.     }
  113.     lis[i].onclick = function () {
  114.         var href = this.getElementsByTagName("a")[0].href;
  115.         if (href)
  116.             window.location = href;
  117.     }
  118. }
  119. function getSpanByClassName(ele, className) {
  120.     var spans = ele.getElementsByTagName("span");
  121.     for (var i = 0; i < spans.length; i++) {
  122.         var cName = spans[i].className || "";
  123.         if (cName.toLowerCase() == className.toLowerCase()) {
  124.             return spans[i];
  125.         }
  126.     }
  127. }
  128. function hoverLi(obj) {
  129.     obj.className = "M" + obj.index + "Common M" + obj.index + "Hover";
  130.     var dda = obj.getElementsByTagName("a")[0];
  131.     dda.style.color = "#ffffff";
  132.     var span = getSpanByClassName(obj, "bordCss bordBottomCssN") || obj.spanCursor;
  133.     if (span) {
  134.         span.className = "bordCss bordBottomCssNF";
  135.         obj.spanCursor = span;
  136.     }
  137. }
  138. function unHoverLi(obj) {
  139.     if (!obj.isHover) {
  140.         obj.className = "M" + obj.index + "Common M" + obj.index;
  141.         var dda = obj.getElementsByTagName("a")[0];
  142.         dda.style.color = "";
  143.         if (obj.spanCursor) obj.spanCursor.className = "bordCss bordBottomCssN";
  144.     }
  145. }
  146. function openwindowSup(url, name, iWidth, iHeight) {
  147.     var url;//转向网页的地址;
  148.     var name;//网页名称，可为空;
  149.     var iWidth;//弹出窗口的宽度;
  150.     var iHeight;//弹出窗口的高度;
  151.     var iTop = (window.screen.availHeight + 30 - iHeight) / 2;//获得窗口的垂直位置;
  152.     var iLeft = (window.screen.availWidth + 208 - iWidth) / 2;//获得窗口的水平位置;
  153.     var param = 'height=' + iHeight + ',width=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',border=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes,location=no,status=no';
  154.     var o = window.open(url, name, param);
  155.     o.focus();
  156. }
  157. function getCoordsNav(el) {
  158.     var box = el.getBoundingClientRect(),
  159.     doc = el.ownerDocument,
  160.     body = doc.body,
  161.     html = doc.documentElement,
  162.     clientTop = html.clientTop || body.clientTop || 0,
  163.     clientLeft = html.clientLeft || body.clientLeft || 0,
  164.     top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop) - clientTop,
  165.     left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
  166.     return { 'top': top, 'left': left };
  167. };
  168. function sb_setmenunav(name, vis, obj) {
  169.     var d = document.getElementById(name); //要显示隐藏的div
  170.     if (!d) return;
  171.     var padLeft = parseInt(d.getAttribute("pdLeft") || 0);
  172.     if (vis) {
  173.         if (d.timeArray) {
  174.             window.clearTimeout(d.timeArray);
  175.             d.timeArray = 0;
  176.         }
  177.         d.style.display = "block";
  178.         if (!d.onmouseover) {
  179.             d.onmouseover = function () {
  180.                 sb_setmenunav(name, true);
  181.             }
  182.             d.onmouseout = function () {
  183.                 sb_setmenunav(name, false);
  184.                 unHoverLi(obj);
  185.             }
  186.         }
  187.         if (obj) {
  188.             var objp = obj;
  189.             if (objp.parentNode.tagName.toLowerCase() == "li")
  190.                 objp = obj.parentNode;
  191.             var xy = getCoordsNav(objp);
  192.             var xias = xy.left;
  193.             var yias = xy.top + objp.offsetHeight;
  194.             padLeft = padLeft || 0;
  195.             d.style.left = xias + padLeft + "px";
  196.             d.style.top = yias + "px"; //;
  197.         }
  198.     }
  199.     if (obj && obj.tagName.toLowerCase() == "li") {
  200.         d.needSaveClass = obj;
  201.         d.prevClass = obj.className;
  202.     }
  203.     else if (d.needSaveClass) {
  204.         hoverLi(d.needSaveClass);
  205.     }
  206.     if (!vis) {//延时隐藏，可以移动上去
  207.         if (d.spanCursor) d.spanCursor.className = "bordCss bordBottomCssN";
  208.         d.timeArray = window.setTimeout(function () {
  209.             d.style.display = "none"; d.style.height = "";
  210.         }, 100);
  211.     }
  212. }
  213. </script>
  214. <div style="text-align:center;clear:both"><br>
  215. </div>
  216. </body>
  217. </html>

08-31 13:04
Powered by LMLPHP ©2024 chunzhisu 0.056620