This document will go through the html involved in the design of the dhtml menus. Advanced developers will have to excuse me if you think i'm teaching you to 'suck eggs' but for now I will concentrate on getting across the basics and gradually over the weeks things will get more and more technical.

At the top of the web form is the following:

<link REL='STYLESHEET' HREF='../global.css' TYPE='text/css'>
<script src="../menuapi.js"></script><script src="../mycode.js"></script>

These statements import the stylesheet, the table api and the custom javascript file. Note the use of ../ in front of the file name to indicate 'within the current database'.

The next bit is the data required for the menus, basically the menu table you completed in the Notes Version of the form. As the document is delivered in a 'read' state - ie the field values will appear as text within the html and not as field values I have surrounded each field with a <span> so it can be accessed from within my Javascript code (ie document.all.menu_r_title.innerText). I have then surrounded all the data with another span with style attributes ("position:absolute;left:1;top:1;visibility:hidden") so that the data is hidden from the user.

<span style="position:absolute;left:1;top:1;visibility:hidden">
<span id="menu_r_title"><field></span>
<span id="menu_r_items"><field></span>
<span id="menu_r_itemcode"><field></span>
<span id="menu_r_code"><field></span>
</span>

When the data is taken from the above, the Javascript needs a place to build the resulting menus. This is what the next bit is for. First of all a simple table is constructed (id=MENUBAR) and the javascript function will place all dynamically created html for the main menu button within here (at position id=mbar). Then the function will create all the dropdown menu code at position (id=mitems)

<table id='MENUBAR'><tr><td align='left' valign='center'>
<span id='mbar'></span>
</td><td align='right' valign='center'><span id='dsp3'>&nbsp;</span></td></tr></table>
<span id='mitems'></span>

Finally, the following wraps the content field in a span with an onmouseover javascript event which calls the hidemenus function. This function ensures that once the user has moved the mouse away from the drop down menu - the drop down will disappear. Incidently the content field in the web form has been given the style 'HTML' (within its notes properties) so that the contents are treated as pass thru html.

<span onmouseover="hidemenus()"><field content> </span>

Questions? - steve.castledine@projectdx.org