So far I've made the table update the submnu by clicking on the topmnu item. What I want to happen is when the mouse leaves the table area i want it to clear the contents of the submnu. I call the loadmnu function from the body onload. Everything else is working fine!
The javascript is as follows :
Code:
var mnu = new Array();
mnu[0] = new Array("Home",new Array());
mnu[0][1] = new Array("Homepage","http://www.slackpaq.com");
mnu[0][2] = new Array("About","http://www.slackpaq.com/about");
mnu[0][3] = new Array("Contact","http://www.slackpaq.com/contact");
mnu[1] = new Array("Videos",new Array());
mnu[1][1] = new Array("Search","http://www.slackpaq.com/videos/search");
mnu[1][2] = new Array("Upload","http://www.slackpaq.com/videos/upload");
mnu[2] = new Array("Audio",new Array());
mnu[2][1] = new Array("Search","http://www.slackpaq.com/audio/search");
mnu[2][2] = new Array("Upload","http://www.slackpaq.com/audio/upload");
function loadmnu ()
{
for (var i = 0; i < mnu.length; i++)
{
document.getElementById('topmnu').innerHTML += "<td width=80px onclick='loadsubmnu(" + i + ")'>" + mnu[i][0] + "</td>";
}
}
function loadsubmnu (id)
{
document.getElementById('submnu').innerHTML = "";
for (var i = 1; i < mnu[id].length; i++)
{
document.getElementById('submnu').innerHTML += "<td width=80><a href=" + mnu[id][i][1] + ">" + mnu[id][i][0] + "</a></td>";
}
}
function empty(itm)
{
itm.innerHTML = "<td colspan=100%> </td>";
}
The HTML table is as follows :
HTML Code:
<table height=20 border=1 cellspacing=0 cellpadding=0>
<tr id="topmnu">
</tr>
<tr height=20 id="submnu" onmouseout="empty()">
<td width=100% colspan=100%> </td>
</tr>
</table>
Any Ideas?!?!? |
