首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS+CSS实现电子商务网站导航模板效果代码

Posted in Javascript onSeptember 10, 2015

本文实例讲述了JS+CSS实现电子商务网站导航模板效果代码。分享给大家供大家参考。具体如下：

这是一款JS+CSS实现的电子商务网站导航模板，二级导航菜单，超强美化，超强实用性，分享给大家。

运行效果截图如下：

JS+CSS实现电子商务网站导航模板效果代码

在线演示地址如下：

具体代码如下：

<!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.3water.com"||thisUPage_s=="3water.com"||thisUPage_s=="demo.3water.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程序设计有所帮助。

JS+CSS实现电子商务网站导航模板效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
vue实现菜单切换功能
May 08 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 #Javascript
js实现的动画导航菜单效果代码
Sep 10 #Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 #Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 #Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 #Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 #Javascript
JS实现自动变换的菜单效果代码
Sep 09 #Javascript
http(6) 动静分离(1) 生成缩略图(1) reload(1) 防盗链(1) https(7) Windows server 2016(6) Telnet(1) 负载均衡(6) 反向代理(2)
You might like
对javascript和select部件的结合运用
2006/10/09 PHP
PHP中的正规表达式（一）
2006/10/09 PHP
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python中count函数简单的实例讲解
2020/02/06 Python
python 写一个水果忍者游戏
2021/01/13 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
FC-Moto西班牙：摩托车手最大的购物场所之一
2019/04/11 全球购物
Groupon西班牙官方网站：在线优惠券和交易，节省高达70％
2021/03/13 全球购物
年度献血先进个人事迹材料
2014/02/14 职场文书
供电工程专业求职信
2014/08/09 职场文书
技术入股合作协议书
2014/10/07 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
员工年度工作总结2015
2015/05/18 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers