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 Reply

2011

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;fo nt-size:10px;color :#ffffff;}
</style>
<script language="JScri pt" 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="#00009 9"><span onClick="showSu bMenu(1)"
style="cursor:h and"> Men u 1</span></td>
<td width="1"></td>
<td width="80" bgcolor="#00009 9"><span onClick="showSu bMenu(2)"
style="cursor:h and"> Men u 2</span></td>
<td width="1"></td>
<td width="80" bgcolor="#00009 9"><span onClick="showSu bMenu(3)"
style="cursor:h and"> Men u 3</span></td>
</tr>
<tr height="1">
<td width="1"></td>
</tr>
<tr height="20">
<td width="80" bgcolor="#00009 9"><span onClick="showSu bMenu(4)"
style="cursor:h and"> Men u 4</span></td>
<td width="1"></td>
<td width="80" bgcolor="#00009 9"><span onClick="showSu bMenu(5)"
style="cursor:h and"> Men u 5</span></td>
<td width="1"></td>
<td width="80" bgcolor="#00009 9"><span onClick="showSu bMenu(6)"
style="cursor:h and"> Men u 6</span></td>
</tr>
</table>
<div id="menu1"
style="position :absolute;left: 10px;top:31px;v isibility:hidde n;cursor:hand;" >
<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(11)">&nbs p;Sub item 1.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(12)">&nbs p;Sub item 1.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(13)">&nbs p;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;v isibility:hidde n;cursor:hand;" >
<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(21)">&nbs p;Sub item 2.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(22)">&nbs p;Sub item 2.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(23)">&nbs p;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:hidd en;cursor:hand; "

<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(31)">&nbs p;Sub item 3.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(32)">&nbs p;Sub item 3.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(33)">&nbs p;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;v isibility:hidde n;cursor:hand;" >
<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(41)">&nbs p;Sub item 4.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(42)">&nbs p;Sub item 4.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(43)">&nbs p;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;v isibility:hidde n;cursor:hand;" >
<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(51)">&nbs p;Sub item 5.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(52)">&nbs p;Sub item 5.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(53)">&nbs p;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:hidd en;cursor:hand; "

<table border="0" cellpadding="0" cellspacing="0" width="80">
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(61)">&nbs p;Sub item 6.1</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(62)">&nbs p;Sub item 6.2</span></td></tr>
<tr height="1"><td width="1"></td></tr>
<tr height="20"><td width="80" bgcolor="#0000f f"><span
onClick="execut eLink(63)">&nbs p;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

3308

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 auto sort by the first column without user clicking on it. Here is the sorttable.js code. addEvent(window, "load", sortables_init); var SORT_COLUMN_INDEX;

Javascript

2650

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 reason it is not working on colmuns containg checkboxes, text-boxes (or, any user input fileds). For checkbox column, the values are lost when clicked on the column title to sort. I tried a lot to modify but couldnt achive what I wanted.

Javascript

1144

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 looking for. i am looking for code to make a dynamical menu with submenus The menu items are stored in a MS SQL Table and when by loading the page the items will be created. i have made a asp table. i want my menu on the left cell, in the middle...

.NET Framework

2628

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 they columns lose their alignment. Can anyone help me correct this?

ASP.NET

3222

creating dynamic menus with submenus from sql

by: paulakeijzers | last post by:

ASP.NET

4002

how to build dynamic menu with submenus

by: paula | last post by:

ASP.NET

4827

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 expandable row, the hidden row is made visible with css. The problem is when i sort the rows, the hidden rows get sorted as well which i don't want and want to be moved (while sorting) relative to their parent rows. The following is my complete html code...

Javascript

7997

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, call determined functions, and edit the data already present What will you need to use the grid? A table with standard markup and an ID to call the script that will turn the table into a grid Parameters: tabelaID => id of the table that will...

Javascript

13799

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 drag&drop on the same page (which was not possible). Now i´ve a new concept of the script, more object oriented. I´ve also commented the whole code so you guys can easier understand it engine. What exactly we need when trying to make a column drag &...

Javascript

9554

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9377

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9989

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9925

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9811

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8814

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7358

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5266

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5405

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET