p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   ASP.NET 1.0 and 1.1 Basics (http://p2p.wrox.com/forumdisplay.php?f=60)
-   -   2-Level Menu (http://p2p.wrox.com/showthread.php?t=11702)

mahulda April 11th, 2004 08:21 PM

2-Level Menu
 
I want to make a 2-Level Menu .
i.e I have a list of items and when the mouse is positioned above any
item, a separete list would get generated alongside that item.
Somewhat like the Start Menu we all have on our DeskTops.

Is there any way that it can be done using VBScript?



Mohammed April 11th, 2004 09:29 PM

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


All times are GMT -4. The time now is 04:00 PM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.