Table Based (Relative) Menus - Free DHTML JavaScript Web Menu Sample 9

Table Based (Relative) Menus

Table Based (Relative) Menus

Left Aligned Table Cell

Center Aligned Table containing the menu

This sample demonstrates how to put the menu inside a table cell.

Important: Please note that embedding the menu inside a table cell is NOT as simple as just declaring the menu code files or the menu_data file inside the table cell. Although this will work on most browsers, some have serious issues with this and could break your menus positioning or even render the menu unusable. Internet Explorer for the Apple Mac will have problems positioning sub menus, embedded inside a table cell, unless the proper technique is adhered to.

Please see the FAQ article: Mac Trouble for more information

There are a few modifications you need to make with this menu style, the key property is the position="relative"; property. This needs to be declared for the (alwaysvisible) main menu you want inserting into the table.

Also, you must ONLY insert the main menu inside the table cell, all other sub menus MUST be positioned outside of the table or any other HTML object this includes DIV's and SPAN's.

The following illustrates the structure that should be used for embedding menus in a table. All of the sub menus are configured inside the file menu_data.js that has been loaded as one of the first objects after the BODY tag and are all independent of other HTML objects. What this does is ensure that the sub menus are free to move about your web page and are not restricted by boundary constraints imposed by embedding sub menus inside relative objects.

<html>
<head>
</head>
<body>

<script language=JavaScript src="/milonic_src.js" type=text/javascript></script>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=/mmenuns4.js></scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=/mmenudom.js></scr"+"ipt>");
</script>
<script language=JavaScript src="/menu_data.js" type=text/javascript></script>

<table>
<td>
<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Home;url=http://www.milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=My Milonic;");
}
drawMenus();
</script>
</td>
</table>
</body>

From the code above, you will see that the sub menus are included in the <BODY> of the document. As these menus are "absolutely positioned" they are independent of all other HTML objects. The only menu that IS dependant on the flow of the HTML is "Main Menu" and this has been included separately inside the cell of the table.

Right Aligned Table Cell

Dynamic Downloads are possible for the Table Based (Relative) Menus demo
The code for this menu sample will be generated on the fly and compiled into a .ZIP file format for downloading onto your own machine.

Click here to download this sample

Note that you need to be logged in to download the menus and the download delivered will depend on your current license status.

Milonic provide full featured pull down web menus for some of the worlds largest companies

Learn about how Milonic's DHTML menus can benefit your site

What does it cost? DHTML Menu prices

Who is using us?
Sample Client list

Bespoke menu design and build service from the Milonic team

Our bolt-on modules provide free optional extras for specialist projects

Free icons and images for all licensed users with our Menu Imagepack

What is Milonic up to at the moment? Check our blog