Hello,
one simple idea would be the following one. I've just done it from the
sratch.
The idea is to place a div tag for each submenu which is invisible by
default. When clicking on the text of a menu, the corresponding sub menu div
tag is set visible. When clicking on a sub menu item, its number is
displayed by an alert().
When clicking another main menu item, all sub menus are set invisible,
because I guess you always want just ONE sub mneu being visible at the same
time.
Possibly the following aspects are still open now (which I didn't care):
1) There are div tags used, so it might be NO cross browser solution
2) I used absolute positions for the div's, but on your web site your menus
are centered on the page. So you have to find out another way to get the
right coordinates for placing the div's.
Here is the code:
<html>
<head>
<title>Test</title>
<style type="text/css">
td {font-family:Arial;font-size:10px;color:#ffffff;}
</style>
<script language="JScript" type="text/jscript">
<!--
function hideSubMenus()
{
document.all.menu1.style.visibility="hidden";
document.all.menu2.style.visibility="hidden";
document.all.menu3.style.visibility="hidden";
document.all.menu4.style.visibility="hidden";
document.all.menu5.style.visibility="hidden";
document.all.menu6.style.visibility="hidden";
}
function showSubMenu(menu)
{
hideSubMenus(); // some other menu could be still visible now
switch (menu)
{
case 1: document.all.menu1.style.visibility="visible"; break;
case 2: document.all.menu2.style.visibility="visible"; break;
case 3: document.all.menu3.style.visibility="visible"; break;
case 4: document.all.menu4.style.visibility="visible"; break;
case 5: document.all.menu5.style.visibility="visible"; break;
case 6: document.all.menu6.style.visibility="visible"; break;
}
}
function executeLink(subitem)
{
var menu = Math.round(subitem / 10);
alert("Sub menu item " + subitem + " was clicked.");
switch (menu)
{
case 1: document.all.menu1.style.visibility="hidden"; break;
case 2: document.all.menu2.style.visibility="hidden"; break;
case 3: document.all.menu3.style.visibility="hidden"; break;
case 4: document.all.menu4.style.visibility="hidden"; break;
case 5: document.all.menu5.style.visibility="hidden"; break;
case 6: document.all.menu6.style.visibility="hidden"; break;
}
}
//-->
</script>
</head>
<body leftmargin="10" topmargin="10">
<table border="0" cellpadding="0" cellspacing="0" width="242">
<tr height="20">
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(1)"
style="cursor:hand"> Menu 1</span></td>
<td width="1"></td>
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(2)"
style="cursor:hand"> Menu 2</span></td>
<td width="1"></td>
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(3)"
style="cursor:hand"> Menu 3</span></td>
</tr>
<tr height="1">
<td width="1"></td>
</tr>
<tr height="20">
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(4)"
style="cursor:hand"> Menu 4</span></td>
<td width="1"></td>
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(5)"
style="cursor:hand"> Menu 5</span></td>
<td width="1"></td>
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(6)"
style="cursor:hand"> Menu 6</span></td>
</tr>
</table>
<div id="menu1"
style="position:absolute;left:10px;top:31px;visibility:hidden;cursor:hand;">
<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(11)"> Sub item 1.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(12)"> Sub item 1.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(13)"> Sub item 1.3</span></td></tr>
<tr height="1"><td width="1"></td></tr>
</table>
</div>
<div id="menu2"
style="position:absolute;left:91px;top:31px;visibility:hidden;cursor:hand;">
<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(21)"> Sub item 2.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(22)"> Sub item 2.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(23)"> Sub item 2.3</span></td></tr>
<tr height="1"><td width="1"></td></tr>
</table>
</div>
<div id="menu3"
style="position:absolute;left:172px;top:31px;visibility:hidden;cursor:hand;"<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(31)"> Sub item 3.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(32)"> Sub item 3.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(33)"> Sub item 3.3</span></td></tr>
<tr height="1"><td width="1"></td></tr>
</table>
</div>
<div id="menu4"
style="position:absolute;left:10px;top:52px;visibility:hidden;cursor:hand;">
<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(41)"> Sub item 4.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(42)"> Sub item 4.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(43)"> Sub item 4.3</span></td></tr>
<tr height="1"><td width="1"></td></tr>
</table>
</div>
<div id="menu5"
style="position:absolute;left:91px;top:52px;visibility:hidden;cursor:hand;">
<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(51)"> Sub item 5.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(52)"> Sub item 5.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(53)"> Sub item 5.3</span></td></tr>
<tr height="1"><td width="1"></td></tr>
</table>
</div>
<div id="menu6"
style="position:absolute;left:172px;top:52px;visibility:hidden;cursor:hand;"<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(61)"> Sub item 6.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(62)"> Sub item 6.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000ff"><span
onClick="executeLink(63)"> Sub item 6.3</span></td></tr>
<tr height="1"><td width="1"></td></tr>
</table>
</div>
</body>
</html>
Maybe this helps you.
Nice greetings from
Thomas