一个很好的二级导航菜单

来源:互联网 发布:软件 风险矩阵表 编辑:程序博客网 时间:2024/04/29 00:21
////////////////////////////////////////////////////////////////
//
--------------- 主导航条内容 ------------//
var mainLayer=new Array("蓝色理想","动意营造");//主导航栏目

//--------------- 次导航条内容 ------------//
var subLayer0=new Array("论坛","文献"); //导航栏目一下的次级栏目
var subLayerHttp0=new Array("#","#");//主导航栏目一下的次级栏目连接地址
var subLayer1=new Array("论坛","文献");//导航栏目二的次级栏目
var subLayerHttp1=new Array("#","#");//主导航栏目二的次级栏目连接地址


//--------------- 主导航条Table参数调整 ------------//
var mainTableTdWidth=100//每个TD的宽度,调整主导航内容间距
var mainTableBorder=0//调整主导航表格边框宽度
var mainTableCellspacing=0//调整主导航表格Cellspacing
var mainTableCellpadding=1//调整主导航表格Cellpadding
var mainTableBgcolor="#000000"//调整主导航表格背景色
var mainTableBordercolor=""//调整主导航表格编框颜色
var mainTableBackgroundImg=""//调整主导航表格背景图片url地址
var hrefClassName="link" //调整url风格样式
var mainTableTdBgcolor="B2CBCF"//调整主导航表格Td色

//--------------- 次导航条Table参数调整 ------------//
var subTableBorder=0//调整次导航条表格边框宽度
var subTableCellspacing=0//调整次导航条表格Cellspacing
var subTableCellpadding=1//调整次导航条表格Cellpadding
var subTableBgcolor="#000000"//调整次导航条表格背景色
var subTableBordercolor=""//次导航条表格编框颜色
var subTableBackgroundImg=""//次导航条表格背景图片url地址
var subTableTdBgcolor="B2CBCF"//调整次导航表格Td色
var sbuTabbleTop=21//次导航表格上下微调
var sbuTabbleLeft=-1//次导航表格左右微调

//--------------- 系统参数*请勿调整 ------------//
var layerMax=mainLayer.length+10;
var layerName="index";

//--------------- 生成下拉菜单 ------------//
function createMainLayer(){ 
document.write(
"<table border=0 cellspacing=0 cellpadding=0><tr><td><div id='wall' onmouseout=layervib('visible','"+layerMax+"') style='position:relative; left:0px; top:0px; width:100%; z-index:1' ><table width="+mainLayer.length*mainTableTdWidth+" border='"+mainTableBorder+"' cellspacing='"+mainTableCellpadding+"' cellpadding='"+mainTableCellpadding+"' bgcolor='"+mainTableBgcolor+"' bordercolor='"+mainTableBordercolor+"' background='"+mainTableBackgroundImg+"'><tr>");
for(i=0;i<mainLayer.length;i++){
document.write(
"<td width='"+mainTableTdWidth+"' bgcolor='"+mainTableTdBgcolor+"' class='"+hrefClassName+"' onmouseover=layervib('visible','"+i+"')>&nbsp;<a href='#'>"+mainLayer[i]+"</a></td>");
}
document.write(
"</tr></table>");

for(j=0;j<mainLayer.length;j++){
createSubLayer(j);
}
document.write(
"</div></table></td></tr></table>");
}


//--------------- 生成每项下拉菜单内容 ------------//
function createSubLayer(num){
var subLayerName= layerName +num;
var subLayerLeft=(mainTableTdWidth*num)+mainTableCellpadding+mainTableBorder;
var subLayerList=eval("subLayer"+num);
var subLayerHttpList=eval("subLayerHttp"+num);
document.write(
"<div id='"+subLayerName+"' style='position:absolute; left:"+(subLayerLeft+sbuTabbleLeft)+"px; top:"+((mainTableBorder+mainTableCellspacing+mainTableCellpadding)*2+sbuTabbleTop)+"px; z-index:2; height: 24px; visibility: hidden' onmouseover=layervib('visible','"+num+"') onmouseout=layervib('visible','"+layerMax+"')>");
if(subLayerList.length!=0){
document.write(
"<table width='100px' border='"+subTableBorder+"' cellspacing='"+subTableCellpadding+"' cellpadding='"+subTableCellpadding+"' bgcolor='"+subTableBgcolor+"' bordercolor='"+subTableBordercolor+"' background='"+subTableBackgroundImg+"'"
for(h=0;h<subLayerList.length;h++){ 

document.write(
"<tr><td bgcolor='"+subTableTdBgcolor+"' width='100%' class='link'>&nbsp;<a href='"+ subLayerHttpList [h]+"' class='link'>"+subLayerList[h]+"</a>&nbsp;</td></tr>");
}
document.write(
"</table>");
}
document.write(
"</div>"); 

}

//------------------------------次菜单显隐控制--------------------------//
function layervib(type,num){
var H=type;
var temp=(H='visible'?'hidden':'visible')
for(var i=0;i<mainLayer.length;i++){
var E=eval('document.all.index'+i+'.style');
var H=eval(i);
if(i==num){E.visibility=type}else{E.visibility=temp};
}
}

 

在调用的地方

<script language='javascript'>CreateMainLayer():</script>

原创粉丝点击