js实现的二级横向菜单条实例

2019-11-20 11:45:48

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现的二级横向菜单条。分享给大家供大家参考。具体如下：

这是一款十分清新的多级网页菜单，类似滑动门的操作风格，鼠标放上后，相应的二级菜单会显示出来，我觉得挺漂亮的，适合许多网站使用，不相信么？点击“运行代码”看效果吧。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-2row-nav-menu-codes/

具体代码如下：

<!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"><TITLE>蓝色二级横向滑动导航菜单</TITLE><style type=text/css>UL { LIST-STYLE-TYPE: none; padding:0px; margin:0px;}LI { FONT-SIZE: 12px; COLOR: #333; LINE-HEIGHT: 1.5em; FONT-FAMILY: "微软雅黑", Arial, Verdana;}.hide { DISPLAY: none}#mainmenu_top UL LI .menuhover { BACKGROUND: url(images/mainmenu_s.gif) no-repeat; COLOR: #fff;}#mainmenu_top UL LI A { MARGIN-TOP: 2px; CURSOR: pointer; PADDING-TOP: 8px; HEIGHT: 20px; text-decoration: none;}#mainmenu_top { width:100%; HEIGHT: 28px; display:block; overflow:hidden;}#mainmenu_top UL LI {FLOAT: left}#mainmenu_top UL LI A { WIDTH: 81px; height:auto; DISPLAY: block; COLOR: #666666; TEXT-ALIGN: center; BACKGROUND: url(images/mainmenu_h.gif) no-repeat;}#mainmenu_bottom { width:100%; height:32px; line-height:32px; display:block; overflow:hidden; BACKGROUND: url(images/mainmenu_bg.jpg) repeat-x}#mainmenu_bottom .mainmenu_rbg { HEIGHT: 32px; COLOR: #fff; MARGIN-LEFT: 0px; PADDING: 0px 0px 0px 5px; BACKGROUND: url(images/mainmenu_r.gif) no-repeat right 50%;}#mainmenu_bottom UL {}#mainmenu_bottom UL LI { PADDING-LEFT: 8px; FLOAT: left; MARGIN-LEFT: 7px; HEIGHT: 32px;}#mainmenu_bottom UL LI.se { FLOAT: left; MARGIN-LEFT: 7px; HEIGHT: 32px; PADDING-LEFT: 8px; BACKGROUND: url(images/menulink_bg_l.gif) no-repeat;}#mainmenu_bottom UL LI A { COLOR: #fff; LINE-HEIGHT: 32px; PADDING-RIGHT: 18px; DISPLAY: block; text-decoration: none; BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;}#mainmenu_bottom UL LI A:hover { BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%; color: #FFCC00;}#mainmenu_bottom UL LI A.se { COLOR: #fff; LINE-HEIGHT: 32px; PADDING-RIGHT: 18px; DISPLAY: block; BACKGROUND: url(images/menulink_bg_r.gif) no-repeat right 50%;}</style><SCRIPT type=text/javascript>var waitting = 1;var secondLeft = waitting;var timer;var sourceObj;var number;function getObject(objectId)//获取id的函数{ if(document.getElementById && document.getElementById(objectId)) { // W3C DOM return document.getElementById(objectId); } else if (document.all && document.all(objectId)) { // MSIE 4 DOM return document.all(objectId); } else if (document.layers && document.layers[objectId]) { // NN 4 DOM.. note: this won't find nested layers return document.layers[objectId]; } else { return false; }}function SetTimer()//主导航时间延迟的函数{ for(j=1; j <10; j++){  if (j == number){  if(getObject("mm"+j)!=false){   getObject("mm"+ number).className = "menuhover";   getObject("mb"+ number).className = "";  }  }  else{   if(getObject("mm"+j)!=false){   getObject("mm"+ j).className = "";   getObject("mb"+ j).className = "hide";  }  } }}function CheckTime()//设置时间延迟后{ secondLeft--; if ( secondLeft == 0 ) { clearInterval(timer); SetTimer(); }}function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟{ number = Num; sourceObj = thisobj; secondLeft = 1; timer = setTimeout('CheckTime()',100);}function OnMouseLeft()//主导航鼠标移出函数,清除时间函数{ clearInterval(timer); } function mmenuURL()//主导航、二级导航显示函数{var thisURL = document.URL;tmpUPage = thisURL.split( "/" );thisUPage_s = tmpUPage[ tmpUPage.length-2 ];thisUPage_s= thisUPage_s.toLowerCase();//小写 if(thisUPage_s=="#"||thisUPage_s=="#"||thisUPage_s=="#") {  getObject("mm1").className="menuhover"  getObject("mb1").className = ""; } else if(thisUPage_s=="domain") {  getObject("mm2").className="menuhover"  getObject("mb2").className = ""; } else if(thisUPage_s=="hosting") {  getObject("mm3").className="menuhover"  getObject("mb3").className = ""; } else if(thisUPage_s=="mail") {  getObject("mm4").className="menuhover"  getObject("mb4").className = ""; } else if(thisUPage_s=="solutions"||thisUPage_s=="site"){  getObject("mm5").className="menuhover"  getObject("mb5").className = ""; } else if(thisUPage_s=="promotion"){  getObject("mm6").className="menuhover"  getObject("mb6").className = ""; } else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){  getObject("mm7").className="menuhover"  getObject("mb7").className = ""; } else if(thisUPage_s=="benefit"){  getObject("mm8").className="menuhover"  getObject("mb8").className = ""; } 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"){  getObject("mm9").className="menuhover"  getObject("mb9").className = ""; } else {  getObject("mm1").className="";  getObject("mb1").className = ""; }}window.load=mmenuURL()</SCRIPT><!--导航开始--><DIV id=mainmenu_body><!--主导航开始--> <DIV id=mainmenu_top> <UL> <LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>网站首页</A> </LI> <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>JS代码</A> </LI> <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>电子商务</A> </LI> <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>脚本下载</A> </LI> <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>建站技巧</A> </LI> <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI> <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS导航菜单</A> </LI> <LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>菜单特效</A> </LI> <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO优化</A> </LI></UL> </DIV><!--子导航导航开始--> <DIV id=mainmenu_bottom> <DIV class=mainmenu_rbg>  <UL class=hide id=mb1>  <LI><A href="#">脚本下载-中小企业菜单特效专家</A> </LI>  <LI><A href="#">网站公告：脚本下载欢迎您~</A> </LI>  </UL>  <UL class=hide id=mb2>  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>网页特效</A> </LI></UL>  <UL class=hide id=mb3>  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>  <LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI>  <LI><A href="#" target=_parent>网页特效</A> </LI></UL>  <UL class=hide id=mb4>  <LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>脚本下载</A> </LI>  <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>网页特效</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>  <UL class=hide id=mb5>  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>  <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服务器租用</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI>  <LI><A href="#" target=_parent>超级机房</A> </LI>  <LI><A href="#" target=_parent>脚本下载</A> </LI></UL>  <UL class=hide id=mb6>  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>  <LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>脚本下载</A> </LI></UL>  <UL class=hide id=mb7>  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>  <LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>个人建站</A> </LI>  <LI><A href="#" target=_parent>门户建站</A> </LI></UL>  <UL class=hide id=mb8 style="DISPLAY: none">  <LI style="MARGIN-LEFT: 270px"><A href="/agent/" target=_parent>脚本下载</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>  <UL class=hide id=mb9>  <LI style="MARGIN-LEFT: 180px"><A href="/agent/">脚本下载</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI>  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL> </DIV> </DIV></DIV></body></html>

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

上一篇：jquery+css实现的红色线条横向二级菜单效果

下一篇：JS实现网页顶部向下滑出的全国城市切换导航效果