当前位置：Gxlcms > JavaScript > js实现的黑背景灰色二级导航菜单效果代码

js实现的黑背景灰色二级导航菜单效果代码

时间：2021-07-01 10:21:17 帮助过：28人阅读

本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款js实现的黑背景灰色二级导航菜单，兼容IE6、firefox的js+css横向二极导航菜单。挺简洁，不过很清新，二级菜单是水平显示在主菜单的下方，采用流行的微软雅黑字体，若不想用这种字体，可换成默认的宋体即可。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/

具体代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
  5. <TITLE>兼容IE6、firefox的灰色横向二极导航菜单代码</TITLE>
  6. <style type=text/css>
  7. BODY { background:#26272b;}
  8. a{ color:#FFFFFF}
  9. UL {LIST-STYLE-TYPE: none;padding:0px;margin:0px;}
  10. LI {FONT-SIZE: 12px; COLOR: #333; LINE-HEIGHT: 1.5em; FONT-FAMILY: "微软雅黑", Arial, Verdana;}
  11. .hide {DISPLAY: none}
  12. #mainmenu_top{width:980px; margin:0 auto;BACKGROUND: url('images/nav_bg.gif') bottom repeat-x;HEIGHT: 40px; }
  13. #mainmenu_top UL{}
  14. #mainmenu_top UL LI {FLOAT: left;}
  15. #mainmenu_top UL LI A {WIDTH: 100px;CURSOR: pointer;line-HEIGHT:32px;padding:6px 0 2px;text-decoration: none;DISPLAY: block;COLOR: #fff;TEXT-ALIGN: center; FONT-WEIGHT: bold;}
  16. #mainmenu_top .menu-lft {padding-left:10px;background:url('images/nav_l.gif') no-repeat left bottom;height:40px;}
  17. #mainmenu_top .menu-rht {background:url('images/nav_r.gif') no-repeat right bottom;height:40px;}
  18. #mainmenu_top UL LI .menuhover {BACKGROUND: url('images/nav_hover.gif') bottom repeat-x; COLOR: #000;}
  19. #mainmenu_top UL LI.home{BACKGROUND: url('images/nav_home.gif') center bottom no-repeat;}
  20. #mainmenu_bottom {width:980px; margin:0 auto;height:32px;line-height:32px;display:block;overflow:hidden;BACKGROUND:#fff;}
  21. #mainmenu_bottom UL LI { FLOAT: left; MARGIN-LEFT:12px;padding:0 12px;HEIGHT: 32px;}
  22. #mainmenu_bottom UL LI A {COLOR: #313131; LINE-HEIGHT: 32px;PADDING-RIGHT: 18px;DISPLAY: block;text-decoration: none; background:url('images/line.gif') no-repeat right bottom;}
  23. #mainmenu_bottom UL LI A:hover {text-decoration: underline;}
  24. </style>
  25. <SCRIPT type=text/javascript>
  26. var waitting = 1;
  27. var secondLeft = waitting;
  28. var timer;
  29. var sourceObj;
  30. var number;
  31. function getObject(objectId)//获取id的函数
  32. {
  33.  if(document.getElementById && document.getElementById(objectId)) {
  34.  // W3C DOM
  35.  return document.getElementById(objectId);
  36.  } else if (document.all && document.all(objectId)) {
  37.  // MSIE 4 DOM
  38.  return document.all(objectId);
  39.  } else if (document.layers && document.layers[objectId]) {
  40.  // NN 4 DOM.. note: this won't find nested layers
  41.  return document.layers[objectId];
  42.  } else {
  43.  return false;
  44.  }
  45. }
  46. function SetTimer()//主导航时间延迟的函数
  47. {
  48.  for(j=1; j <10; j++){
  49.  if (j == number){
  50.  if(getObject("mm"+j)!=false){
  51.   getObject("mm"+ number).className = "menuhover";
  52.   getObject("mb"+ number).className = "";
  53.  }
  54.  }
  55.  else{
  56.   if(getObject("mm"+j)!=false){
  57.   getObject("mm"+ j).className = "";
  58.   getObject("mb"+ j).className = "hide";
  59.  }
  60.  }
  61.  }
  62. }
  63. function CheckTime()//设置时间延迟后
  64. {
  65.  secondLeft--;
  66.  if ( secondLeft == 0 )
  67.  {
  68.  clearInterval(timer);
  69.  SetTimer();
  70.  }
  71. }
  72. function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟
  73. {
  74.  number = Num;
  75.  sourceObj = thisobj;
  76.  secondLeft = 1;
  77.  timer = setTimeout('CheckTime()',100);
  78. }
  79. function OnMouseLeft()//主导航鼠标移出函数,清除时间函数
  80. {
  81.  clearInterval(timer);
  82. }
  83. </SCRIPT>
  84. <!--导航开始-->
  85. <DIV id=mainmenu_body>
  86. <!--主导航开始-->
  87.  <DIV id=mainmenu_top>
  88.  <div class="menu-lft"><div class="menu-rht">
  89.  <UL>
  90.  <LI class="home"><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>网站首页</A> </LI>
  91.  <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>JS代码</A> </LI>
  92.  <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>电子商务</A> </LI>
  93.  <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>脚本下载</A> </LI>
  94.  <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>建站技巧</A> </LI>
  95.  <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI>
  96.  <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS导航菜单</A> </LI>
  97.  <LI><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>网络营销</A> </LI>
  98.  <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO优化</A> </LI></UL>
  99.  </DIV></DIV>
  100.  </DIV>
  101. <!--子导航导航开始-->
  102.  <DIV id=mainmenu_bottom>
  103.  <UL class=hide id=mb1>
  104.  <LI><A href="#">2012年元旦网站推广惊喜促销价</A> </LI>
  105.  <LI><A href="#">网站公告：脚本之家7年了</A> </LI> </UL>
  106.  <UL class=hide id=mb2>
  107.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  108.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  109.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  110.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  111.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  112.  <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
  113.  <UL class=hide id=mb3>
  114.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  115.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  116.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  117.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  118.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  119.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  120.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  121.  <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
  122.  <UL class=hide id=mb4>
  123.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  124.  <LI><A href="#" target=_parent>网页特效</A> </LI>
  125.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  126.  <LI><A href="#" target=_parent>网络营销</A> </LI></UL>
  127.  <UL class=hide id=mb5>
  128.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  129.  <LI><A href="#" target=_parent>服务器租用首页</A> </LI>
  130.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  131.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  132.  <LI><A href="#" target=_parent>超级机房</A> </LI>
  133.  <LI><A href="#" target=_parent>脚本之家</A> </LI></UL>
  134.  <UL class=hide id=mb6>
  135.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  136.  <LI><A href="#" target=_parent>脚本下载</A> </LI>
  137.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  138.  <LI><A href="#" target=_parent>脚本之家</A> </LI></UL>
  139.  <UL class=hide id=mb7>
  140.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  141.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  142.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  143.  <LI><A href="#" target=_parent>个人建站</A> </LI>
  144.  <LI><A href="#" target=_parent>门户建站</A> </LI></UL>
  145.  <UL class=hide id=mb8 style="DISPLAY: none">
  146.  <LI><A href="#" target=_parent>脚本之家</A> </LI>
  147.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  148.  <LI><A href="#" target=_parent>网络营销</A> </LI></UL>
  149.  <UL class=hide id=mb9>
  150.  <LI><A href="#">脚本之家</A> </LI>
  151.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  152.  <LI><A href="#" target=_parent>网页特效</A> </LI>
  153.  <LI><A href="#" target=_parent>网络营销</A> </LI>
  154.  <LI><A href="#" target=_parent>网络营销</A> </LI></UL>
  155. <script>
  156. function mmenuURL()//主导航、二级导航显示函数
  157. {
  158. var thisURL = document.URL;
  159. tmpUPage = thisURL.split( "/" ); 
  160. thisUPage_s = tmpUPage[ tmpUPage.length-2 ]; 
  161. thisUPage_s= thisUPage_s.toLowerCase();//小写
  162. //thisUPage=thisUPage.substring(0,4)
  163.  if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
  164.  {
  165.   getObject("mm1").className="menuhover"
  166.   getObject("mb1").className = "";
  167.  }
  168.  else if(thisUPage_s=="domain")
  169.  {
  170.   getObject("mm2").className="menuhover"
  171.   getObject("mb2").className = "";
  172.  }
  173.  else if(thisUPage_s=="hosting")
  174.  {
  175.   getObject("mm3").className="menuhover"
  176.   getObject("mb3").className = "";
  177.  } 
  178.  else if(thisUPage_s=="mail")
  179.  {
  180.   getObject("mm4").className="menuhover"
  181.   getObject("mb4").className = "";
  182.  }
  183.  else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
  184.   getObject("mm5").className="menuhover"
  185.   getObject("mb5").className = "";
  186.  }
  187.  else if(thisUPage_s=="promotion"){
  188.   getObject("mm6").className="menuhover"
  189.   getObject("mb6").className = "";
  190.  }
  191.  else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
  192.   getObject("mm7").className="menuhover"
  193.   getObject("mb7").className = "";
  194.  }
  195.  else if(thisUPage_s=="benefit"){
  196.   getObject("mm8").className="menuhover"
  197.   getObject("mb8").className = "";
  198.  }
  199.  else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
  200.   getObject("mm9").className="menuhover"
  201.   getObject("mb9").className = "";
  202.  }
  203.  else
  204.  {
  205.   getObject("mm1").className="";
  206.   getObject("mb1").className = "";
  207.  }
  208. }
  209. window.load=mmenuURL()
  210. </script>
  211. </DIV>
  212. </DIV>
  213. </body>
  214. </html>

希望本文所述对大家的javascript程序设计有所帮助。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！