Submenus in table cells

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

Jul 23 '05 #1

Subscribe Post Reply

1960

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">

</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;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)"> 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;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)"> 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;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)"> 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;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)"> 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;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)"> 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;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)"> 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

Jul 23 '05 #2

Similar topics

Table Sort

by: jeffsal | last post by:

I am using sorttable.js to sort a table which works fine which allows a user to sort the table by clicking on the column header. Is there some code I could add to the page (onload or something) to...

Javascript

sorting content of table at client side

by: cotton_gear | last post by:

Hello, Fiest of all let me thank this group for so quick in responding to any postings. I am using a javascript based utility from a site to sort the columns of the table. But, for some strange...

Javascript

how to create dynamical menu with submenus

by: paula | last post by:

I've got a problem with asp.net i am trying to make a menu control. and have searched the web for serveral controls but they don't work correctly. I am pretty new to asp.net building. What am i...

.NET Framework

Scrolling Table

by: Shawn B. | last post by:

Greetings, I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then...

ASP.NET

creating dynamic menus with submenus from sql

by: paulakeijzers | last post by:

I've got a problem with asp.net i am trying to make a menu control. and have searched the web for serveral controls but they don't work correctly. I am pretty new to asp.net building. What am i...

ASP.NET

how to build dynamic menu with submenus

by: paula | last post by:

I've got a problem with asp.net i am trying to make a menu control. and have searched the web for serveral controls but they don't work correctly. I am pretty new to asp.net building. What am i...

ASP.NET

Collapsible table sorting problem

by: Kamal | last post by:

Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the...

Javascript

Grid table (add, remove, import, edit)

by: Romulo NF | last post by:

Greetings again to everyone, Im back to show this grid componenet i´ve developed. With this grid you can show the data like a normal table, remove the rows that you need, add rows, import data,...

Javascript

Drag & Drop Table Columns (new version, explained)

by: Romulo NF | last post by:

Greetings, I´m back here to show the new version of the drag & drop table columns (original script ). I´ve found some issues with the old script, specially when trying to use 2 tables with...

Javascript

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

How to calculate date of retirement from date of birth

by: Mushico | last post by:

How to calculate date of retirement from date of birth

Data Management

Windows 11 and Access Combo Box Issue

by: DJRhino | last post by:

Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

Microsoft Access / VBA

Can faster file sharing be achieved by connecting computers simultaneously via WiFi and LAN cables

by: tracyyun | last post by:

Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...

Networking - Hardware / Configuration

Energy Model code modification to account for year dependent interest rate

by: giovanniandrean | last post by:

The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...

Python

Send Current Object to PDF

by: NeoPa | last post by:

Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...

Microsoft Access / VBA

Access Europe Meeting - Wed 1 Nov - Using SQL Server skills to extend Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...

Microsoft Access / VBA

Finding a record, and then saving a new record after the record has been amended.

by: nia12 | last post by:

Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...

Microsoft Access / VBA

VBA Class Basics (Report Class)

by: NeoPa | last post by:

Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

Microsoft Access / VBA