首頁 > 開發者 > CSS

JS+CSS實現電子商務網站導航模板效果代碼_javascript技巧

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了JS+CSS實現電子商務網站導航模板效果代碼。分享給大家供大家參考。具體如下：

這是一款JS+CSS實現的電子商務網站導航模板，二級導覽功能表，超強美化，超強實用性，分享給大家。

運行效果截圖如下：

線上示範地址如下：

http://demo.jb51.net/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.jb51.net"||thisUPage_s=="www.jb51.net"||thisUPage_s=="demo.jb51.net")  {   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程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More