本文實例講述了js實現(xiàn)的黑背景灰色二級導(dǎo)航菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款js實現(xiàn)的黑背景灰色二級導(dǎo)航菜單，兼容IE6、firefox的js+css橫向二極導(dǎo)航菜單。挺簡潔，不過很清新，二級菜單是水平顯示在主菜單的下方，采用流行的微軟雅黑字體，若不想用這種字體，可換成默認(rèn)的宋體即可。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-black-bgcolor-2level-nav-style-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"><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><TITLE>兼容IE6、firefox的灰色橫向二極導(dǎo)航菜單代碼</TITLE><style type=text/css>BODY { background:#26272b;}a{ color:#FFFFFF}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{width:980px; margin:0 auto;BACKGROUND: url('images/nav_bg.gif') bottom repeat-x;HEIGHT: 40px; }#mainmenu_top UL{}#mainmenu_top UL LI {FLOAT: left;}#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;}#mainmenu_top .menu-lft {padding-left:10px;background:url('images/nav_l.gif') no-repeat left bottom;height:40px;}#mainmenu_top .menu-rht {background:url('images/nav_r.gif') no-repeat right bottom;height:40px;}#mainmenu_top UL LI .menuhover {BACKGROUND: url('images/nav_hover.gif') bottom repeat-x; COLOR: #000;}#mainmenu_top UL LI.home{BACKGROUND: url('images/nav_home.gif') center bottom no-repeat;}#mainmenu_bottom {width:980px; margin:0 auto;height:32px;line-height:32px;display:block;overflow:hidden;BACKGROUND:#fff;}#mainmenu_bottom UL LI { FLOAT: left; MARGIN-LEFT:12px;padding:0 12px;HEIGHT: 32px;}#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;}#mainmenu_bottom UL LI A:hover {text-decoration: underline;}</style><SCRIPT type=text/javascript>var waitting = 1;var secondLeft = waitting;var timer;var sourceObj;var number;function getObject(objectId)//獲取id的函數(shù){ 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()//主導(dǎo)航時間延遲的函數(shù){ 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()//設(shè)置時間延遲后{ secondLeft--; if ( secondLeft == 0 ) { clearInterval(timer); SetTimer(); }}function showM(thisobj,Num)//主導(dǎo)航鼠標(biāo)滑過函數(shù),帶時間延遲{ number = Num; sourceObj = thisobj; secondLeft = 1; timer = setTimeout('CheckTime()',100);}function OnMouseLeft()//主導(dǎo)航鼠標(biāo)移出函數(shù),清除時間函數(shù){ clearInterval(timer);}</SCRIPT><!--導(dǎo)航開始--><DIV id=mainmenu_body><!--主導(dǎo)航開始--> <DIV id=mainmenu_top> <div class="menu-lft"><div class="menu-rht"> <UL> <LI class="home"><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>網(wǎng)站首頁</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>電子商務(wù)</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導(dǎo)航菜單</A> </LI> <LI><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO優(yōu)化</A> </LI></UL> </DIV></DIV> </DIV><!--子導(dǎo)航導(dǎo)航開始--> <DIV id=mainmenu_bottom> <UL class=hide id=mb1> <LI><A href="#">2012年元旦網(wǎng)站推廣驚喜促銷價</A> </LI> <LI><A href="#">網(wǎng)站公告：武林網(wǎng)7年了</A> </LI> </UL> <UL class=hide id=mb2> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI></UL> <UL class=hide id=mb3> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI></UL> <UL class=hide id=mb4> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI></UL> <UL class=hide id=mb5> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>服務(wù)器租用首頁</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>超級機房</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI></UL> <UL class=hide id=mb6> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>腳本下載</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI></UL> <UL class=hide id=mb7> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>武林網(wǎng)</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><A href="#" target=_parent>武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI></UL> <UL class=hide id=mb9> <LI><A href="#">武林網(wǎng)</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI> <LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI></UL><script>function mmenuURL()//主導(dǎo)航、二級導(dǎo)航顯示函數(shù){var thisURL = document.URL;tmpUPage = thisURL.split( "/" ); thisUPage_s = tmpUPage[ tmpUPage.length-2 ]; thisUPage_s= thisUPage_s.toLowerCase();//小寫//thisUPage=thisUPage.substring(0,4) if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com") { 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></DIV></body></html>希望本文所述對大家的javascript程序設(shè)計有所幫助。
新聞熱點
疑難解答
