Pulldownmenu

Dear developpers,

I have a Javascript which creates a tree based menu. See the code beneath. I want to use this script in a non-frame based website. When you click on a menu item, the subitems appear beneath the clicked item.

After clicking on a submenu item the website is totaly reloaded with the corresponding page. The problem is that the menutree is collapsed because is does not know which item is clicked last en which is has to show.

How can this script be modified so that when a submenu item is clicked all submenu items from the corresponding menuitem are shown?

I hope someone can help me with this problem.

Thank you.

Ramon.

<SCRIPT LANGUAGE=”JavaScript”>
Tree = new Array();
Tree[0] = new Array();
Tree[0][100] = Array(‘Welkom’,’index2.asp?cat=Welkom’);
Tree[0][200] = Array(‘SDK Events’,’oversdk.asp?cat=Over SDK’);
Tree[0][300] = Array(‘Promotours’,’projecten.asp?cat=Promotietours’);
Tree[0][400] = Array(‘Special Events’,’projecten.asp?cat=Special Events’);
Tree[0][500] = Array(‘Beursstands’,’beursstands.asp?cat=Beursstands’);
Tree[0][600] = Array(‘Theater’,’projecten.asp?cat=Theaterprojecten’);
Tree[0][700] = Array(‘Promotie’,’promotie.asp?cat=Promotiemateriaal’);
Tree[0][800] = Array(‘Nieuws’,’nieuws.asp?cat=Nieuws’);
Tree[0][900] = Array(‘Referenties’,’referentielijst.asp?cat=Referentielijst’);
Tree[0][1000] = Array(‘Contact’,’contact.asp?cat=Contact’);

Tree[300] = new Array();
Tree[300][301] = Array(‘Mitsubishi Colt’,’projecten.asp?projectid=1&cat=Promotietours’);
Tree[300][302] = Array(‘Dockers Style’,’projecten.asp?projectid=2&cat=Promotietours’);
Tree[300][303] = Array(‘Exact Software’,’projecten.asp?projectid=3&cat=Promotietours’);

Tree[400] = new Array();
Tree[400][401] = Array(‘Nike meetings’,’projecten.asp?projectid=13&cat=Special Events’);
Tree[400][402] = Array(‘Ikea opening’,’projecten.asp?projectid=15&cat=Special Events’);
Tree[400][403] = Array(‘Ikea Go Cubic’,’projecten.asp?projectid=16&cat=Special Events’);
Tree[400][404] = Array(‘Sven Ikea fan’,’projecten.asp?projectid=9&cat=Special Events’);
Tree[400][405] = Array(‘Meatis’,’projecten.asp?projectid=14&cat=Special Events’);

Tree[500] = new Array();
Tree[500][501] = Array(‘Nike ISPO’,’projecten.asp?projectid=13&cat=Special Events’);
Tree[500][502] = Array(‘Nike Outdoor’,’projecten.asp?projectid=15&cat=Special Events’);
Tree[500][503] = Array(‘Interdecor’,’projecten.asp?projectid=16&cat=Special Events’);
Tree[500][504] = Array(‘Seat autosalon’,’projecten.asp?projectid=9&cat=Special Events’);
Tree[500][505] = Array(‘Exact’,’projecten.asp?projectid=14&cat=Special Events’);

Tree[600] = new Array();
Tree[600][601] = Array(‘Twee Turven’,’projecten.asp?projectid=13&cat=Special Events’);
Tree[600][602] = Array(‘Exact Globe’,’projecten.asp?projectid=15&cat=Special Events’);

clevel = -1;

img_up = ‘images/up.gif’;
img_down = ‘images/down.gif’;

function buildMenu() {

var i;
var buffer;
var imgSpace;

buffer = ‘<table border=0 width=”115″><tr><td height=”1″ colspan=”2″ valign=”top” align=”center”><img src=”images/bgmenu_scheidingslijn.gif”></td></tr>’;

for (i in Tree[0]) {

if (!Tree[i]) {
space = ‘<a href=”‘ + Tree[0][i][1] + ‘” onclick=”buildMenu()” class=”link_keuzemenu” target=”_top”>’ + Tree[0][i][0] + ‘</a>’;
imgSpace = ”;
} else {
space = ‘<a href=”#” id=”img_’ + i + ‘” OnClick=”collapse(‘ + i + ‘,0)” class=”link_keuzemenu”>’ + Tree[0][i][0] + ‘</a>’;
imgSpace = ‘<img src=”‘ + img_up + ‘” id=”img_’ + i + ‘” OnClick=”collapse(‘ + i + ‘,0)” onmouseover=”style.cursor=’hand'”>’;
}

buffer += ‘<tr>’;
buffer += ‘<td width=10 valign=”top” align=”center”>’ + imgSpace + ‘</td>’;
buffer += ‘<td id=”node_’ + i + ‘”>’ + space + ‘</td>’;
buffer += ‘</tr>’;
buffer += ‘<tr>’;
buffer += ‘<td height=”5″ colspan=”2″ valign=”top” align=”center”><img src=”images/bgmenu_scheidingslijn.gif”></td>’;
buffer += ‘</tr>’;
}

buffer += ‘</table>’;

document.getElementById(‘tree’).innerHTML = buffer;//insertAdjacentHTML(‘beforeEnd’,buffer)

}

function collapse(node,cnode) {

if (clevel == -1) {
clevel = node;
}

if (cnode == 0 && node != clevel) {

tElem = document.getElementById(‘node_’ + clevel);
rElem = document.getElementById(‘table_’ + clevel);

delObj = tElem.removeChild(rElem);

//document.getElementById(‘table_’ + clevel).removeNode(true);
document.getElementById(‘img_’ + clevel).src = ” + img_up + ”;
clevel = node;

}

//event.cancelBubble = true;

if (document.getElementById(‘table_’ + node) == null) {

var i;
var buffer;
var imgSpace;

buffer = ‘<table border=0 width=”95″ id=”table_’ + node + ‘”>’;

for (i in Tree[node]) {

if (!Tree[i]) {
space = ‘<a href=”‘ + Tree[node][i][1] + ‘&Node=’+node+’&Tree=’+i+'” class=”link_keuzemenu2″ target=”_top”>’ + Tree[node][i][0] + ‘</a>’;
imgSpace = ”;
} else {
space = ‘<a href=”#” id=”img_’ + i + ‘” OnClick=”collapse(‘ + i + ‘,0)” class=”link_keuzemenu2″><b>’ + Tree[node][i][0] + ‘</b></a>’;
imgSpace = ‘<img src=”‘ + img_up + ‘” id=”img_’ + i + ‘”>’;
}

buffer += ‘<tr>’;
buffer += ‘<td align=”left” valign=”top”><img src=”images/pijltje.gif” border=”0″></td>’;
buffer += ‘<td id=”node_’ + i + ‘”>’ + space + ‘</td>’;
buffer += ‘</tr>’;

}

buffer += ‘</table>’;

document.getElementById(‘node_’ + node).innerHTML += buffer;
document.getElementById(‘img_’ + node).src = ” + img_down + ”;

} else {

clevel = -1;

tElem = document.getElementById(‘node_’ + node);
rElem = document.getElementById(‘table_’ + node);

delObj = tElem.removeChild(rElem);

document.getElementById(‘img_’ + node).src = ” + img_up + ”;

}

}

function changeStyle(node,action) {

docStyle = document.getElementById(‘node_’ + node).style;

with (docStyle) {

if (action == ‘to’) {

backgroundColor= ‘#e5e5e5’;
} else {
backgroundColor = ‘#ffffff’;

}
}
}

//–>
</SCRIPT>

<body OnLoad=”BuildMenu();”>

Also in #JavaScript _↴