Embedding the DHTML JavaScript Web Menu inside a Table Cell

Embedding the DHTML JavaScript Web Menu inside a Table Cell or other Embedded object

Embedding the DHTML Menu inside a table cell or a DIV, will allow the menu to move with page content flow and also enables the menu to be positioned in precisely the right location on your web page regardless of web browser dimensions and page content.

This technique is ideal if content on your web pages constantly change or if you need to position the menu based on other page content. There are several other techniques, such as using screenposition to keep the menu in the center of the page at all times but none of these techniques are as elegant as inserting the menu into a dynamic slot such as a table cell.

However, embedding a menu into a table cell, reveals a small element of complexity and simply inserting the menu code <SCRIPT> references and menu_data.js file will not work across all web browsers. Problems associated with this method usually involve Internet Explorer for the Apple Mac due to the way it sets the objects parent element. Internet Explorer for the Apple Mac will set the table cell as the parent element and will adjust menus according to the top and left positions of the new parent and not the browser window which is the position the menu needs in order to set the correct position of sub menus. Internet Explorer for Apple Mac is the only web browser that does this and is the web browser that causes the highest number of problems. Microsoft has ceased development on this extremely buggy web browser and you are advised to inform your clients of this. Unfortunately, many Apple Mac users have used IE for years and are very reluctant to quit. Web browsers such as Firefox, Mozilla and Opera are much better alternatives and include a much greater level of standardization.

So, let's get started and create a table based menu that is compatible across the full web browser range.

There are just a few things you need to know before you begin. With a standard absolute positioned menu, all you need to do is include a <SCRIPT> reference for the file milonic_src.js and a small snippet of browser detection javascript to load mmenudom.js or mmenuns4.js based on the viewing web browser. Then you add another <script> reference for your data file.
All this really needs to be at the very top of your web page. We recommend putting this as the very first elements just after the <BODY> tag. This means that the menu is part of the document.body object and that it loads before anything else. If your page is very long and takes a few seconds to load or there is a bad connection to your web server, your users will be able to view links to other pages on your website whilst the page is still loading, or they can cancel the download and move onto another page before having to wait for the whole page to appear. It doesn't take long for a user to become fed up of waiting and move to another website if there is nothing they can do at yours. Having the menu appear before everything else will give them at least something to play with whilst they are waiting.

Please note that visitors to websites with table bound menus will have to wait until the end </TABLE> tag has been rendered in the HTML before the menu becomes visible. This is one of the disadvantages of using table bound menus, in fact it's one of the disadvantages of using tables but if you keep your tables small it shouldn't be too much of a problem.

The only differences between the table based menu and the absolute positioned menu is the location of menu elements within your HTML. The following describes the order of HTML elements for building successful table based menus:

<HTML>
<HEAD>HEAD Contents
<BODY>
   <SCRIPT>milonic_src.js
   <SCRIPT>mmenudom.js or mmenuns4.js
   <SCRIPT>menu_data.js (for submenus only)
   <TABLE>
      <TR>
         <TD>
            <SCRIPT>Relative Main Menu Definition
         </TD>
      </TR>
   </TABLE>
</BODY>
</HTML>

From the above you can see where you need to place your menu elements in order to get a fully functional table based menu.

All we need to do now is show you how it's done for real.

First, you need to build your HTML page, include the <HTML> tags, <HEAD> tags and <META> tags as you would normally. Then just after the <BODY> tag, place the menu code references, like this:

<HTML>
<HEAD>
<TITLE>Table Based Menu</title>
</HEAD>
<BODY>
<SCRIPT type="text/javascript" src="milonic_src.js"></SCRIPT>
<noscript><a href="http://www.milonic.com/">DHTML Menu JavaScript Menu Powered by Milonic</a></noscript>
<script type="text/javascript">

</SCRIPT>
<SCRIPT type="text/javascript" src="menu_data.js"></SCRIPT>

Note that you need to remove the main menu reference from within the menu_data.js file. The 'Main Menu' is built separately inside the table cell that you want the menu to appear in, like this:
   <TABLE>
      <TR>
         <TD>

            <SCRIPT TYPE="text/javascript">
               with(new menuname("Main Menu")){
               style=menuStyle;
               alwaysvisible=1;
               position="relative";
               aI("text=item1;url=#");
               aI("text=item2;url=#");
               aI("text=item3;url=#");
               aI("text=item4;url=#");
               }
               drawMenus();
            </SCRIPT>

         </TD>
      </TR>
   </TABLE>

The above 'Main Menu' has now been embedded inside the table cell. Note that the only difference between the above 'Main Menu' and an absolute positioned 'Main Menu' is the addition of the property position="relative";. This property tells the menu system that it must build the menu as a relative object, thus allowing it to flow with the page content.

You can also create a .js file to store the above menu and then include the file reference inside the table cell, this file can then be edited at any time saving you the bother of editing each HTML file individually and the following illustrates how you would call this within your table cell: <

The contents of the file named embedded_main_menu.js would be the same as the contents of your table cell but you need to omit the 2 <SCRIPT> tags as thay are not needed and will cause JavaScript errors if they are included as JavaScript:
with(new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
position="relative";
aI("text=item1;url=#");
aI("text=item2;url=#");
aI("text=item3;url=#");
aI("text=item4;url=#");
}
drawMenus();

Once you have included your menu <SCRIPT> references and inserted the main menu into your table cell, you are free to modify the page as you desire and the menu will become part of the table cell and flow with the rest of your webpage

Here is a very simple table bound menu, please use "View Source" to check the page contents Table Menu Sample

There is also a full menu download here: Menu Sample Number 9.php

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