首页
所有分类
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 时间比较实现代码
Oct 28 Javascript
Javascript 类型转换方法
Oct 24 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
javascript三种代码注释方法
Jun 02 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
javascript实现移动端红包雨页面
Jun 23 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
CPU(2) SLi Minor 2020(63) 德生1994(1) 天梯图(1) 纸巾盒(1) 德生G88(1) AE3805(1) ICF-SW100(1) ICF-F10(1) PR-D3L(1)
You might like
德生PL990的分析评价
2021/03/02 无线电
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP生成树的方法
2015/07/28 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
python是怎么被发明的
2020/06/15 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
公司市场部岗位职责
2013/12/02 职场文书
运动会入场词60字
2014/02/15 职场文书
纪检监察立案决定书
2015/06/24 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android