本文實例講述了JS+CSS實現電子商務網站導航模板效果代碼。分享給大家供大家參考。具體如下：
這是一款JS+CSS實現的電子商務網站導航模板，二級導航菜單，超強美化，超強實用性，分享給大家。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-css-dzsw-wen-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"><TITLE>適合電子商務網站CSS導航模板版</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><style>BODY {}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_body{ margin-top:100px;}#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; FONT-WEIGHT: bold; 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); } </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>CCS導航</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>CSS模板</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>HTML+CSS模板</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>HTML+CSS模板</A> </LI> <LI><A href="#" target=_parent>HTML+CSS模板</A> </LI> <LI><A href="#" target=_parent>HTML+CSS教程</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>MYSQL數據庫</A> </LI> <LI><A href="#" target=_parent>MYSQL數據庫</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>MYSQL數據庫</A> </LI> <LI><A href="#" target=_parent>MSSQL數據庫</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> <LI><A href="#" target=_parent>CDN加速設施</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>綠色G級郵箱</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="#" 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="#">代理加盟</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> <script>function mmenuURL()//主導航、二級導航顯示函數{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.VeVB.COm"||thisUPage_s=="www.survivalescaperooms.com"||thisUPage_s=="demo.VeVB.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></DIV></body></html>希望本文所述對大家的JavaScript程序設計有所幫助。
新聞熱點
疑難解答
