Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > JS CSS implements e-commerce website navigation template effect code_javascript skills

JS CSS implements e-commerce website navigation template effect code_javascript skills

WBOY
Release： 2016-05-16 15:39:50
Original
1485 people have browsed it

The example in this article describes the JS CSS implementation of e-commerce website navigation template effect code. Share it with everyone for your reference. The details are as follows:

This is an e-commerce website navigation template implemented by JS CSS, with a secondary navigation menu, super beautification, and super practicality. I would like to share it with everyone.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/

The specific code is as follows: 

<!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>
Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.

Related labels：
css js navigation
source：php.cn
Previous article：Use of WeChat Attendance Cookies for WeChat Enterprise Account Development_javascript skills Next article：jQuery realizes the classic sliding door effect of automatically switching playback_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Can a workerpool declared in multiple routes still maintain its cpu usage without caring about the threshold I'm hoping to find a node.js system with a workerpool to handle CPU intensive tasks, but I...
From 2024-04-06 19:54:23
0
1
444
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
Show hidden side panels: checked I would like to have a navigation menu in the side panel with the ability to switch to vie...
From 2024-04-06 15:49:33
0
1
319
Should we use SSG to deploy dashboards created with Nuxt.js? We will develop a dashboard for internal use using Nuxt.js. Since this will be an internal...
From 2024-04-06 13:17:44
0
1
493
Electron gets AppData on preload How to get the preloaded AppData directory? Background.js[...]asyncfunctioncreateWindow(){...
From 2024-04-06 11:05:31
0
1
417
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template