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

2015-09-10 16:06作者：yezheng

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

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

运行效果截图如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<TITLE>适合电子商务网站CSS导航模板版</TITLE>

<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>

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>

<UL>

<LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>CCS导航</A> </LI>

<LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS模板</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>

<LI><A href="#">本导航非常适合于分类比较多电子商务站等网站的导航模板版</A> </LI>

<LI><A href="#">此导航很漂亮</A> </LI>

</UL>

<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 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>MYSQL数据库</A> </LI>

<LI style="DISPLAY: none; 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>

<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>CDN加速设施</A> </LI></UL>

<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>

<LI style="DISPLAY: none"><A href="#" target=_parent>网站制作首页</A> </LI>

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>

</body>

</html>

希望本文所述对大家的JavaScript程序设计有所帮助。