Submenus in table cells

A

andrewkooi

Greetings,

I have 16 links for my horizontal menu navigation as you can see in my
website www.singakad.com and at present, I am using a table and
javascript for this menu.

Is it possible for me to create a submenu for certain cells in this
horizontal menu? How do I go about doing this?

Thank you in advance for any assistance given.


Regards,

Andrew
 
T

Thomas Hoheneder

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">&nbsp;Menu 1</span></td>
<td width="1"></td>
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(2)"
style="cursor:hand">&nbsp;Menu 2</span></td>
<td width="1"></td>
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(3)"
style="cursor:hand">&nbsp;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">&nbsp;Menu 4</span></td>
<td width="1"></td>
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(5)"
style="cursor:hand">&nbsp;Menu 5</span></td>
<td width="1"></td>
<td width="80" bgcolor="#000099"><span onClick="showSubMenu(6)"
style="cursor:hand">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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)">&nbsp;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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top