首页
所有分类
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 不只是脚本
May 30 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
常见的浏览器存储方式（cookie、localStorage、sessionStorage）
May 07 Javascript
微信小程序开发（一）：服务器获取数据列表渲染操作示例
Jun 01 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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
GCN(1) 验证码(1) Flask(2) Python(3) 鲲鹏(1) Pytesseract(1) PIL(1) SFTP(3) 裁剪图片(1) 柱状图(1)
You might like
PHP网页游戏学习之Xnova(ogame)源码解读（九）
2014/06/24 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
动手学习无线电
2021/03/10 无线电
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
js前端面试题及答案整理（一）
2016/08/26 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Python设计模式之抽象工厂模式
2016/08/25 Python
python使用super()出现错误解决办法
2017/08/14 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python线性插值解析
2020/07/05 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
世界上最大的各式箱包网络零售店：eBag
2016/07/21 全球购物
日本一家专门经营各种箱包的大型网站：Traveler Store
2016/08/03 全球购物
生物制药自我鉴定
2014/01/25 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
python可视化之颜色映射详解
2021/09/15 Python