Thread: 2-Level Menu
View Single Post
  #2 (permalink)  
Old April 11th, 2004, 09:29 PM
Mohammed Mohammed is offline
Authorized User
 
Join Date: Apr 2004
Location: Nanjing, Jiangsu, China.
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Mohammed
Default

u can use server side code to generate JS script for this goal.
JS script:

//--------------- main navigator content ------------//
var mainLayer=new Array("menu1","menu2");//main navigator menu

//--------------- sub navigator content ------------//
var subLayer0=new Array("item1","item2"); //sub item1
var subLayerHttp0=new Array("#","#");//sub item1 link
var subLayer1=new Array("item3","item4");//sub item2
var subLayerHttp1=new Array("#","#");//sub item2 link

//--------------- main navigator table parameter ------------//
var mainTableTdWidth=100;
var mainTableBorder=0;
var mainTableCellspacing=0;
var mainTableCellpadding=1;
var mainTableBgcolor="#000000";
var mainTableBordercolor="";
var mainTableBackgroundImg="";
var hrefClassName="link"
var mainTableTdBgcolor="B2CBCF";

var subTableBorder=0;
var subTableCellspacing=0;
var subTableCellpadding=1;
var subTableBgcolor="#000000";
var subTableBordercolor="";
var subTableBackgroundImg="";
var subTableTdBgcolor="B2CBCF";
var sbuTabbleTop=21;
var sbuTabbleLeft=-1;

var layerMax=mainLayer.length+10;
var layerName="index";

//--------------- create drop down menu -----------//
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>");
}

//--------------- create menu content ------------//
function createSubLayer(num){
var subLayerName= layerName +num;
var subLayerLeft=(mainTableTdWidth*num)+mainTableCellp adding+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+mainT ableCellpadding)*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>");

}

//------------------------------show sub item--------------------------//
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=tem p};
}
}


just save above code as a JS file then call it from any html file like this:
<script language="javascript" src="xxx.js"></script>

hope to help

Mohammed