本文实例讲述了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程序设计有所帮助。
易网时代-编程资源站