DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS+CSS實現電子商務網站導航模板效果代碼
JS+CSS實現電子商務網站導航模板效果代碼
編輯：關於JavaScript     

本文實例講述了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程序設計有所幫助。

關於JavaScript
Jquery操作cookie記住用戶名
一、jquery.cookie.js介紹 jquery.cookie.js是一個基於jquery的插
讓DIV的滾動條自動滾動到最底部的3種方法(推薦)
要制作一個在線聊天的程序，在做最後的修飾時，需要對獲得的信息即時滾動以保證用戶總能看到最新消息。聊天
js桌球小游戲
js桌球小游戲在線試玩地址：http:///game/13/游戲截圖,查看大圖：完整代碼，保存到ht

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
JS 數字轉換為大寫金額的簡單實例 簡單的js計算器實現 深入理解JavaScript系列（47）：對象創建模式（上篇） 在javascript中隨機數 math random如何生成指定范圍數值的隨機數 js 自帶的 map() 方法全面了解 javascript實現支持移動設備畫廊 三種取消選中單選框radio的方法教程 解析javascript圖片懶加載與預加載的分析總結 JavaScript實現清空(重置)文件類型INPUT元素值的方法 JavaScript幻燈片效果
熱門推薦
javascript中使用replaceAll()函數實現字符替換的方法 Extjs grid panel自帶滾動條失效的解決方法教程 解析使用js判斷只能輸入數字、字母等驗證的方法(總結) Javascript中的五種數據類型詳解 JavaScript動態設置div的樣式的方法 JavaScript中的時間處理小結 本地對象Array的原型擴展實現代碼 JS Ajax請求如何防止重復提交 Javascript的常規數組和關聯數組對比小結
大家都在看
jQuery實現鼠標懸停顯示提示信息窗口的方法 CSS在IE和Firefox兼容要點分析 四步學會 Ajax WAP中的ASP技術之六 動態加載JavaScript文件的兩種方法 檢測用戶浏覽器是否支持CSS3的方法 JavaScript中setMonth()方法的使用詳解 JavaScript自動設置IFrame高度的小例子
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved