By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,810 Members | 818 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,810 IT Pros & Developers. It's quick & easy.

Submenus in table cells

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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;visibi lity: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;visibi lity: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;visib ility: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;visibi lity: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;visibi lity: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;visib ility: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
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.