471,354 Members | 1,684 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,354 software developers and data experts.

Submenus in table cells

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
1 1837
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.

Similar topics

4 posts views Thread by jeffsal | last post: by
1 post views Thread by cotton_gear | last post: by
7 posts views Thread by Shawn B. | last post: by
1 post views Thread by paulakeijzers | last post: by
4 posts views Thread by paula | last post: by
7 posts views Thread by Kamal | last post: by
reply views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.