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

本文实例讲述了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程序设计有所帮助。

时间: 2015-09-07

JS+CSS实现精美的二级导航效果代码

本文实例讲述了JS+CSS实现精美的二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS+CSS实现的精美二级导航,适合想学一些基础点的.基础js知识技巧的朋友们.其实本菜单的完成不仅仅是需要基础知识,更需要的是对CSS熟悉之后的巧妙构思,菜单可能都会写,但写出好菜单就不那么容易了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jm-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE htm

CSS3+Js实现响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c

JS+CSS实现简单的二级下拉导航菜单效果

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

JS+CSS实现另类带提示效果的竖向导航菜单

本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造另类带提示的竖向导航菜单,觉得挺不错,只是美工水平有限,有兴趣的朋友就请继续完善吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/ 具体代码如下: <html> <head> <title>带提示的竖向导航菜单</title>

仿客齐集首页导航条DIV+CSS+JS [代码实例]

作者子鼠 客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下:  你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分 复制代码 代码如下: <div id="info">   <div

js+css实现导航效果实例

本文实例讲述了js+css实现导航效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 程序代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" xml:lan

JS+CSS实现鼠标滑过时动态翻滚的导航条效果

本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm

JS+CSS实现大气的黑色首页导航菜单效果代码

本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的大气的重色+红色高强对比的菜单,可用作首页导航菜单,从设计的角度来讲,挺专业,从实用角度来讲,应用广泛,是款人见人爱的经典风格菜单,超不错的一个作品. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC

一步步教大家编写酷炫的导航栏js+css实现

一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body>

利用Js+Css实现折纸动态导航效果实例源码

先来看看第一种实现方式 效果图如下: 不再采用ul li的布局方式 -webkit-transform-style:preserve-3d只对子元素有作用,所以每个div都加. 实例源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .wrap{margin:30px auto;widt

使用html+js+css 实现页面轮播图效果(实例讲解)

html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

利用js给datalist或select动态添加option选项的方法

有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例 内容如下: <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head&

基于JS快速实现导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

JS实现快速的导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示     下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

JS+CSS实现仿msn风格选项卡效果代码

本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

js实现显示当前状态的导航效果代码

本文实例讲述了js实现显示当前状态的导航效果代码.分享给大家供大家参考.具体如下: 这里演示显示当前状态的导航,鼠标点击左侧的导航菜单,右侧的内容就会变换,实际上是一个竖向的TAB选项卡,作为菜单来用的话,它正好可以显示当前的菜单位置,比较经典. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-show-nav-style-status-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD

JS实现灵巧的下拉导航效果代码

本文实例讲述了JS实现灵巧的下拉导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS实现下拉菜单,是一款灵巧的网站导航条,支持二级显示,向下滑动显示,经典的下拉菜单,JS和CSS共同编写实现,Li菜单列表风格,便于修改,兼容各大主流浏览器,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-down-nav-blue-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC

js+css简单实现网页换肤效果

本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br