There are several techniques and methods for constructing cross-browser drop-down DHTML menus. Most of them require that the exact location of the menus be pre-determined on the page, or they use only images for the menu selections, or they are constructed by JavaScript after the page is loaded. My work with the AcmeBase Project involves writing programs that write DHTML, and I found the current methods to be clumsy to use to construct menus with programs. The following describes my solution to rendering DHTML menus on web pages and provides several examples of their use.
These menus are:
<div> tags,
<a> tags,
and possibly <table> or <img> tags.
They are easy to layout with PHP or any other server-side program.<a> tags that are easily digested by
search engine spiders, just like any other link in the document.
The links are not hidden in the JavaScript programming or in separate configuration files.
That also means software checking for broken links also works as expected.These menus work with Internet Explorer 5+, Netscape 6+, Opera 5+, Konqueror 3+, Safari 1+, Mozilla 1.2+, and Firefox 0.6+. Over a dozen browsers have been tested. See Browser Notes for a complete list.
This document is the primary description of AcmeMenu. It is intended to 1) provide instructions to constructing DHTML menus, 2) provide working examples of their use, and 3) provide code examples which can be copied and pasted into other documents to be used as templates setting up other menus. This document grew with the software and has become quite large. Originally it was used to test the menus, but now the menus can be tested using the testmenu.htm page. This document is the first to change as the menu software is revised.
There are three versions of the JavaScript menu functions. One is the original source code complete with comments and debug statements. The second version is the first without comments or debug which makes it half the size of the source file and saves download time. The third version is a commercial version that is even smaller in size and is available for $59.95.
| AcmeMenu_source.js | JavaScript source code complete with comments and debug. (88.2KB) |
| AcmeMenu.js | JavaScript without comments or debug statements. (38.1KB) |
| AcmeMenu.zip | All the files used to render this document. (64.3KB) |
This is open software and is licensed under the terms of the GNU General Public License.
A menu, as used here, is a <div> or a <table> tag
with an id attribute set to the menu's name.
A menu header is an <a> tag that has
1) an id attribute, and
2) a href attribute set to:
javascript:menu('menu_id','menu_header_id')
A menu item is an <a> tag that is within a menu or submenu.
A submenu is the same as a menu, just a <div> or <table> tag
with an id attribute.
A submenu header is a menu item (an <a> tag within a menu)
that has its href attribute set to:
javascript:submenu('submenu_id')
Setting up DHTML menus is a three or four step process.
Copy the following statement into your document between the
<head> and </head> tags.
<script src="AcmeMenu.js" type="text/javascript"></script>
Define your menu in the HTML source file.
Menus are simply <div> or <table> tags with enclosed <a> tags.
Each of the menus have a different ID to differentiate them. Most of
the menus below are similar to this example:
<!-- Menu Header -->
<a href="javascript:menu('examplemenu','examplemenu_head')"
id="examplemenu_head" class="menu-head">Menu</a>
<!-- Main Menu -->
<div id="examplemenu" class="menu">
<a href="javascript:submenu('examplesubmenu')">Submenu</a>
<a href="javascript:submenu('examplesubmenu2')">Submenu 2</a>
<hr>
<a href="javascript:self.print()">Print</a>
<a href="javascript:self.close()">Exit</a>
</div>
<!-- Submenu Menu -->
<div id="examplesubmenu" class="menu">
<a href="http://www.nowhere.com">Go Nowhere</a>
<a href="http://www.somewhere.com">Go Somewhere</a>
</div>
<!-- Submenu 2 Menu -->
<div id="examplesubmenu2" class="menu">
<a href="http://www.north.com">Go North</a>
<a href="http://www.south.com">Go South</a>
<a href="http://www.east.com">Go East</a>
<a href="http://www.west.com">Go West</a>
</div>
The next step, which is not necessary for manual menus, is to initialize your menus with
a small script that defines some configuration variables and calls the
make_menu() function.
Its arguments are the ID of the menu and the ID of the menu header.
<script language="JavaScript" type="text/javascript">
make_menu('examplemenu','examplemenu_head');
</script>
If there are more than one set of menus on a page, call the
initialize_menus()
The final step is to define the CSS styles for the menus and place them in
between the document's <head> and </head> tags.
A simple CSS example is:
<style type="text/css">
<!--
.menu { position:absolute; visibility:hidden;
background-color:lightyellow; border:solid black 1px; }
.menu a { display:block; width:100%; }
.menu a:hover { text-decoration:none;
background-color:lightgrey; }
-->
</style>
As a general rule, the menu
<div> tags have the CSS styles of position:absolute;
and visibility:hidden; so they can be positioned and
so their initial display is hidden. If you are using <table> tags
for the menus, then they should have the display:block; setting
too.
The <a> tags usually have
the styles of display:block;, and for Internet Explorer,
width:100%;.
The examples below show the Javascript, the stylesheet settings, and some sample HTML code so that you can copy them and paste them into your document to use as templates setting up your own menus.
The simplest menus are referred to here as "manual" menus. The buttons need to be clicked by the user in order to activate them. Clicking the buttons again or clicking anywhere outside the menus hides them.
The display of the menu and menu header is determined by CSS styles.
The actual location of a manual menu on the page needs to be pre-determined
and specified in the CSS stylesheet. Its location is usually relative to the
entire document, but it can be wrapped in another <div> tag with a
style setting of position:relative;.
Notice the Menu button remains highlighted after it is clicked.
That is because a class menu-head has been assigned
to the button. If the software detects that a CSS class has been
assigned to a menu (or submenu) header, it will reassign the class
to a name that is the original name with the string "-hilite"
appended to it. In the above example, the class name assigned
to the Menu button when clicked is "menu-head-hilite".
This allows the selected path to remain highlighted as the user
operates the menus, and is illustrated below with the
Vertical Menus
and
System Menus.
Simple menus do not need a script.
Here is the style sheet used for the above menu. Here is the HTML code used to construct the above menu.
The above link used to show the style sheet for the manual menu and the next link below are examples of "inline" menus. They are a degenerative form of a menu that does not overlay the document, but instead expands the document when shown.
An inline menu is simply a menu header (an <a> tag)
followed by a menu (a <div> tag).
Whereas other menus specify the style position:absolute;,
inline menus omit that setting.
Inline menus also work best if you specify a third argument to menu() that causes
the menu to stay open when the user clicks somewhere else on the document. For example,
the href attribute of the menu header's <a> tag is:
<a href="javascript:menu('menu_id','menu_header_id',true)"
id="menu_header_id" class="example">...</a>
Inline menus do not need a script.
Here is the style sheet used for these inline menus.
<style type="text/css">
<!--
div.example
{
display:none;
padding:1ex 2ex;
border:solid black 1px;
}
a.example-head,
a.example-head-hilite
{
display:block;
padding:0px 3ex;
background-position:left top;
background-repeat:no-repeat;
}
a.example-head { background-image:url(dtriangle.gif); }
a.example-head-hilite { background-image:url(utriangle.gif); }
-->
</style>
<a href="javascript:menu('ex_inline_html','ex_inline_html_head',true)"
id="ex_inline_html_head"
class="example-head"
>Here is the HTML code used to construct this inline menu.</a>
<div id="ex_inline_html" class="example">
<!-- The contents of the inline menu go here. -->
</div>
Unfortunately these inline menus do not work well with Opera 5 or Opera 6.
Menus work well as pop-up forms. The contents of a menu can be anything,
not just <a> tags. That even holds true for the Auto
Menus described next because the forms "freeze" open when clicked. Look
at the Drop Down Menus under Menu1 below for another example of a pop-up form.
Note: Using this software only for the manual menus described above is analogous to hammering a nail with a sledgehammer. Most of the software is devoted to locating an element pointed to by the mouse, determining its dimensions and coordinates, and placing another document element next to it. The above manual menus can be implemented with much smaller programs. However, if the software has already been downloaded on a previous page, it is a useful library to use. Plus the operation of the manual menus do not interfere with the operation of the Auto Menus described next.
Menus come alive when you call the make_menu() function.
Simply hovering over the menu header with the mouse automatically pops up the menu.
Calling make_menu() initializes the top level menus and locates
their headers. Submenus are built dynamically as they are needed. That
differs from the manual menus above, which scan for all enclosed submenus
the first time they are invoked.
| Menu1 | Menu2 | Menu3 |
The above menus are defined just like the first manual menu. The only difference is that they are setup by executing the following JavaScript:
<script language="JavaScript" type="text/javascript">
make_menu('menu1','menu_head1');
make_menu('menu2','menu_head2');
make_menu('menu3','menu_head3');
</script>
The styles used to render the drop down menus are the same as those used to describe the simple menus above.
Here again is the style sheet used for these drop down menus.
<style type="text/css">
<!--
div.menu {
visibility:hidden;
position:absolute;
color:black;
background-color:lightyellow;
border:solid black 1px;
width:125px;
}
div.menu a { display:block; width:100%; }
div.menu a:link,
div.menu a:visited,
div.menu a:active,
div.menu a:hover { color:black; text-decoration:none; }
div.menu a:hover { background-color:lightgrey; }
a.menu-head,
a.menu-head:link,
a.menu-head:visited,
a.menu-head:hover,
a.menu-head:active,
a.menu-head-hilite,
a.menu-head-hilite:link,
a.menu-head-hilite:visited,
a.menu-head-hilite:active,
a.menu-head-hilite:hover {
display:block;
text-align:center;
color:black;
border:solid black 1px;
width:75px;
}
a.menu-head { background-color:lightgrey; }
a.menu-head:hover,
a.menu-head-hilite { background-color:lightyellow; }
/* Form */
div.formmenu {
visibility:hidden;
position:absolute;
text-align:center;
color:black;
background-color:lightyellow;
border-color:lightgrey;
border-style:solid;
border-width:1px;
padding:3px;
width:325px;
}
-->
</style>
<!-- Menu Bar -->
<center>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="javascript:menu('menu1')"
id="menu_head1" class="menu-head">Menu1</a>
</td>
<td>
<a href="javascript:menu('menu2')"
id="menu_head2" class="menu-head">Menu2</a>
</td>
<td>
<a href="javascript:menu('menu3')"
id="menu_head3" class="menu-head">Menu3</a>
</td>
</tr>
</table>
</center>
<!-- Main Menu 1 -->
<div id="menu1" class="menu">
<a href="javascript:submenu('submenu3')">Submenu</a>
<a href="javascript:submenu('submenu4')">Submenu 2</a>
<hr>
<a href="javascript:submenu('formmenu2')">Form<img
src="star.gif" border="0" alt="Cool stuff"></a>
<hr>
<a href="javascript:self.print()">Print</a>
<a href="javascript:self.close()">Exit</a>
</div>
<!-- Submenu Menu -->
<div id="submenu3" class="menu">
<a href="http://www.nowhere.com">Go Nowhere</a>
<a href="http://www.somewhere.com">Go Somewhere</a>
</div>
<!-- Submenu 2 Menu -->
<div id="submenu4" class="menu">
<a href="javascript:submenu('submenu41')">Submenu 3</a>
<a href="http://www.north.com">Go North</a>
<a href="http://www.south.com">Go South</a>
<a href="http://www.east.com">Go East</a>
<a href="http://www.west.com">Go West</a>
</div>
<!-- Form Menu -->
<div id="formmenu2" class="formmenu">
<form action="javascript:void 0">
<h3>Form</h3>
<table>
<tr>
<th>First</th>
<td><input type="text" name="first" size="25"></td>
</tr>
<tr>
<th>Second</th>
<td><textarea rows="2" cols="18"></textarea></td>
</tr>
<tr>
<th>Third</th>
<td><select>
<option></option>
<option>First example choice</option>
<option>Second example choice</option>
<option>Third example choice</option>
</select></td>
</tr>
<tr>
<th></th>
<td><input type="checkbox" value="y"> Check
<input type="radio" name="testradio" value="y"> One
<input type="radio" name="testradio" value="y"> Two</td>
</tr>
</table>
<br><input type="submit" value="Submit">
</form>
</div>
The menu header for a menu is optional. If a menu does not
have a header, it needs to be visible -- it cannot pop up. This makes
vertical menus easy to construct. They are simply the main menu without
the CSS style display:none; or visibility:hidden;.
The above left and right menus are defined just like the auto
menus above except that there isn't a menu header. They are
setup by executing the following JavaScript, first the left and then the right.
Note that the second argument to make_menu()
<script language="JavaScript" type="text/javascript">
make_menu('leftmenu');
</script>
Here is the style sheet used for the left menu.
Here is the HTML code used for the left menu.
<script language="JavaScript" type="text/javascript">
make_menu('rightmenu').SubmenuPosition='L';
</script>
The SubmenuPosition configuration option above places the
submenus to the left of the menu as illustrated on the above menu to the right.
It is explained below in the
Configuration Variables section.
| Menu1 | Menu2 | Menu3 |
The script to setup a menu that rises up from a menu bar is the same as
that to setup a menu that drops down from a menu bar, with the addition
of the MenuPosition configuration variable setting. The
MenuPosition code and the SubmenuPosition code
can be one of four settings:
U (Up),
D (Down),
L (Left), or
R (Right).
The above menus are setup by executing the following JavaScript:
<script language="JavaScript" type="text/javascript">
initialize_menus();
Menu.MenuPosition = "U";
make_menu('upmenu1','upmenu_head1');
make_menu('upmenu2','upmenu_head2');
make_menu('upmenu3','upmenu_head3');
</script>
There is a bug that can be demonstrated with the above menus. First hover over all the Up Menus above. Next click on the link above them that says "Here is the style sheet used for the right menu.". You probably need to scroll down, but when you hover over the Up Menus again, you will notice that the pop up menus are not in the correct position.
Menu locations are saved once they are computed. If you change the
inline position of the menus on the page, which is what happened when you
clicked the above link, the saved menu locations are wrong. There are two
solutions to this problem. The first, if you have program control of when
the inline positions change, is to call the hide_menus(true)
function with a sole argument set to true. That hides all menus
and sets a flag to force their locations to be recomputed the next time
they are displayed. The second solution is to set a configuration variable
Menu.CacheLocation to false to force the
computation of the menu locations each time they are displayed.
See Configuration Variables below.
The stylesheet and the HTML code for Push Up Menus are the same as those used for the Drop Down Menus.
Here again is the style sheet used for these drop down menus. Here is the HTML code used to define the above menu.
The above menus mimic the system menus found in Windows, Macintosh, and Linux. The buttons need to be clicked before activating the menus, but once activated, the menus stay open until the user selects an item or clicks away outside the menus.
This menu behavior is set up by defining the configuration variable
Menu.ClickStart to be true.
This is the script used to set up the above menu bar.
<script language="JavaScript" type="text/javascript">
initialize_menus();
Menu.ClickStart = true;
Menu.SubmenuOffsetX = -4;
Menu.SubmenuOffsetY = 0;
Menu.AllowReposition = false;
make_menu('file','file_head');
make_menu('edit','edit_head');
make_menu('view','view_head');
</script>
Here is the style sheet used for the above menu.
Here is the HTML code defining the menu bar and the first menu.
A minor variation of the above menus can be obtained by setting
the configuration variable Menu.ClickStop to true
instead of Menu.ClickStart.
That causes the menus to automatically drop down without clicking
the mouse, but the user must click the mouse to hide the menus
— either by clicking on a menu selection or by clicking
somewhere outside of the menus.
Setting Menu.ClickStart to true automatically sets
Menu.ClickStop to true, but setting
Menu.ClickStop to true does not
automatically set Menu.ClickStart to true.
| Menu 2 | ||
|
M e n u 1 |
|
M e n u 3 |
The above menus are referred to as "fixed" menus because the menus are always displayed in a fixed location. The three menus above just happen to be all located at the same coordinate.
These menus are set up by setting the configuration variable
Menu.MenuFixed to "true" to prevent the software from positioning the
menus to be next to their headers.
The menus are instead placed according to their CSS
top and left style settings.
Setting Menu.SubmenuFixed to "true" prevents submenus
from being positioned too.
The above menus also demonstrate the Menu.KeepOpen
configuration setting, which keeps the menu displayed even if the
user clicks away on another part of the page. It is more tenacious
than the Menu.ClickStop setting described above.
These menus are setup with the following JavaScript. The last line of the script shows how to automatically display a menu when a page loads.
<script language="JavaScript" type="text/javascript">
initialize_menus();
Menu.MenuFixed = true;
Menu.KeepOpen = true;
make_menu('fixedmenu1','fixedmenu_head1');
make_menu('fixedmenu2','fixedmenu_head2');
make_menu('fixedmenu3','fixedmenu_head3').show_menu();
</script>
Here is the style sheet used for the above menu.
Here is the HTML code used to define the above menu.
Fixed menus can be used in situations that are not traditionally thought of as a use for menus. Entire sections of html can pop in and out as the mouse hovers over buttons. They turn AcmeMenu into a tool that can be used to design a persistent interface — an interface where the controls are static and the information moves in an out.
| Menu1 | Menu2 | Menu3 |
I didn't know what to call this style of menu, its not really that
distinct of a style. It is my favorite. These menus are a combination of
the normal HTML drop-down menus and the System menus. The menus pop open as
soon as the mouse hovers over them, but the menus remain displayed as if the
Menu.ClickStop variable was set, except that if the user doesn't
click within a specified length of time, the menus automatically close.
Simply put, the menus stay open for a set amount of time after the mouse
wanders outside their borders. Setting the delay time to about a
half of a second gives a nice lazy feel to the menus, and helps ease the
wear and tear on my poor worn out hands.
The above menus are setup by executing the following JavaScript:
<script language="JavaScript" type="text/javascript">
initialize_menus();
Menu.HideDelayTime = .5; // seconds
make_menu('mackmenu1','mackmenu_head1');
make_menu('mackmenu2','mackmenu_head2');
make_menu('mackmenu3','mackmenu_head3');
</script>
The stylesheet and the HTML code for Mack Menus are the same as those used for the Drop Down Menus.
Here again is the style sheet used for these drop down menus. Here is the HTML code used to define the above menu.
As seen above, the actions of a menu can be altered by configuration variables.
They can be set globally before making menus with
make_menu(), or they can be set afterwards for an individual menu
by using the object returned by make_menu(). For example:
Menu.SubmenuOffsetX = 0; // Set globally for all menus
var m1 = make_menu('menu_id1','menu_header_id1');
var m2 = make_menu('menu_id2','menu_header_id2');
m1.SubmenuOffsetY = 0; // Set individual menu
The values assigned to the configuration variables below are the default values initially set to the variables in the software.
The following offset constants are used to position the menu or submenu relative to their header elements. Menu panels are positioned from the lower left corner of the header. Submenu panels are positioned from the upper right corner of their header.
Menu.MenuOffsetX = 0; // Offset from left side of menu header Menu.MenuOffsetY = 0; // Offset from bottom of menu header Menu.SubmenuOffsetX = 0; // Offset from right side of submenu header Menu.SubmenuOffsetY = 0; // Offset from top of submenu header
Border dimensions and padding around menus and their headers need to be known for accurate placement of the menus. The dimensions are read from the element's style attribute or they are read from the CSS stylesheet settings. The units of measure must be pixel units (px) in order to be correctly interpreted. Other measurements such as ex, em, in, and cm are not converted.
If style settings cannot be read, the following constants are used.
Menu.MenuHeaderBorderWidth = null; Menu.MenuHeaderPadding = null; Menu.MenuHeaderPaddingHorz = null; Menu.MenuHeaderPaddingVert = null; Menu.MenuBorderWidth = null; Menu.MenuPadding = null; Menu.MenuPaddingHorz = null; Menu.MenuPaddingVert = null; Menu.SubenuHeaderBorderWidth = null; Menu.SubenuHeaderPadding = null; Menu.SubenuHeaderPaddingHorz = null; Menu.SubenuHeaderPaddingVert = null; Menu.SubmenuBorderWidth = null; Menu.SubmenuPadding = null; Menu.SubmenuPaddingHorz = null; Menu.SubmenuPaddingVert = null;
Menus can be set to be dormant until the menu header is clicked. This activates a behavior similar to system menus.
Menu.ClickStart = false;
Menus can be set to stay open until a mouse click.
If ClickStart is true, then ClickStop is also forced to be true.
Menu.ClickStop = false;
Menus can be set to stay open, even after a mouse click. The
menus remain displayed until another menu that has the
KeepOpen flag needs to be shown.
Menu.KeepOpen = false;
Menus can be set to stay open a set number of seconds after
the mouse wanders outside them. It is like the ClickStop
flag being set with an click event automatically scheduled
to occur after the specified number of seconds.
Menu.HideDelayTime = 0;
Menus can be "frozen" open if the mouse is clicked inside them.
Set AllowFreeze to "false" to turn off that feature.
Menu.AllowFreeze = true;
Menus and submenus can project out in different directions from their header.
By default, menus pop "Down", and submenus pop "Right". The position codes
can be set to one of the following constants:
U (up), D (down), L (left), or R (right).
Menu.MenuPosition = "D"; Menu.SubmenuPosition = "R";
The edges of the menus and submenus are aligned to the MenuPosition or
SubmenuPosition. By default, menus are aligned using to their left edge and
submenus are aligned on their top edge. The alignment codes can be set
to one of the following constants:
T (top), B (bottom), L (left), or R (right).
Menu.MenuAlign = "L"; Menu.SubmenuAlign = "T";
Menus are usually repositioned if necessary to keep them within view.
Set AllowReposition variable to "false" to turn off that feature.
Menu.AllowReposition = true;
Menus can be classified as vertical menus (the default), horizontal menus,
or neither. The classification are only hints used for the placement of
submenus. Menus are place relative to their header's dimensions, but submenu
coordinates are adjusted slightly so that their menu items line up directly
across from each other or up and down vertically. If a menu is neither
vertical or horizontal, the extra adjustments are not made so that submenus
line up with their headers just like menus line up with their
headers.
The MenuOrientation and SubmenuOrientation variables
can be set to one of the following constants:
V (vertical), H (horizontal), or N (neither).
Menu.MenuOrientation = "V"; Menu.SubmenuOrientation = "V";
Menu locations are cached once they are computed. However, if the inline
position of the menus changes, the cached coordinates become invalid.
There are two methods to deal with this problem. The first is to set the
CacheLocation to false to force the menu's coordinates to be
computed each time they are shown. The second method is to invoke the
hide_menus(true) function with its argument set to true
to hide the menus and to force their location to be recomputed the next time they
are shown.
Menu.CacheLocation = true;
Menus can be fixed at a predetermined location by setting the CSS
styles left and top, and by setting the
Menu.MenuFixed configuration constant to true.
The same is true for submenus, their location is fixed on the page if
Menu.SubmenuFixed is true.
Menu.MenuFixed = false; Menu.SubmenuFixed = false;
The menu z-index is used to ensure that menus are displayed on top of the document. The submenu z-indexes are automatically incremented to be greater than their parent's menu z-index.
Menu.ZIndex = 1000;
The highlight suffix is appended to a menu header's class name -- if it has one. This allows the selected path to stay highlighted as the mouse moves over the submenu.
Menu.HighlightSuffix = "-hilite";
Functions assigned to OnShowMenu and OnHideMenu are triggered whenever
a menu is displayed or hidden. The menu object is passed to the functions
as their sole argument. These functions are good for hiding elements
that insist on being displayed on top of everything, including the
menus. Troublesome elements are the <select> tags
in Internet Explorer on Windows and the <iframe>
elements on the Macintosh Safari and Internet Explorer.
Menu.OnShowMenu = null; Menu.OnHideMenu = null;
Timing delays are used before actually showing or hiding a menu.
Increase these numbers if menus items have large padding. The mouse needs
to go from a submenu header across the padding onto the submenu within
the TimeToHide time to ensure smooth operation.
The measurements are in milliseconds.
Menu.TimeToShow = 150; Menu.TimeToHide = 100;
The following are suggestions to use to set up menus. They are not necessarily "good programming practices", rather they are tricks that make the menus work across the broadest range of browsers.
Version 6 browsers, those which implement the DOM 1 and most of the DOM 2 standards, work well with the menus. External CSS stylesheets can be used for all display characteristics and the calculation of menu locations is accurate. Accommodating Version 5 browsers is a bit trickier.
Menu.TimeToHide that sets the
number of milliseconds to wait.)cellpadding and
cellspacing attributes to the <table> tag
instead of specifying those measurements in CSS styles.
The style settings for <table> tags are not queried.cellpadding and cellspacing
attributes of the <table> tags with the number of
pixels — don't use percentage units.<div>
tag's style attribute. Menus quite often need their width adjusted and it's
more convenient if the width is specified in the <div>
tag. It does not have to be specified in "px" units, any CSS units can
be used.<body>
tag or at the end of the page just before the </body>
tag, depending if you want the menus active as soon as possible or after
the page loads. This suggestion applies only to auto menus that have their
positions on the screen computed by the software. It does not apply to
fixed menus, inline menus, or any of the other manual menus.make_menu() after the menu
headers are defined in the document. The menus themselves do not need to
be loaded before calling make_menu(), but the menu headers do
need to be loaded first (unless there are not any menu headers as with the
vertical menus).
<a> tag to width:100%;.
The vertical positioning of the link cannot be determined otherwise. This is
another reason to keep padding dimension of the menus to a minimum for when the width
is 100% and padding is specified, the menu is not rendered correctly in Netscape
or Opera.
<body> tag or just before the </body> tag,
otherwise IE gets confused on where to position them.
<div> tags for menus. If using <table> tags for menus,
specify the style display:block; in addition to the
position:absolute; visibility:hidden settings.
Otherwise, menus don't appear. Note that this conflicts with Opera 6.
visibility:hidden; setting for menu's initial setting
instead of display:none;.Menu.BodyMarginTop to the dimension of
the top margin of the document body.display:block settings in <table> tags, it
causes the display to be out of place. Note that this conflicts with Mozilla.
position:absolute.)
Menus can be tested on any page by loading the source code file and turning
on the debug mode.
That is done by copying the following statement into your document between the
<head> and </head> tags.
<script src="AcmeMenu_source.js" type="text/javascript"></script>
After the page is displayed, type the following into the browser's address bar:
javascript:debug.on()
Turning on the debug mode opens up a second window showing a trace of all the browser events handled by the software and the progression it used to determine the coordinates of the menus. To turn off the debug mode, close the debug window or type the following into the address bar:
javascript:debug.off()
There is a separate test page for menus located at testmenu.htm which is included in the AcmeMenu.zip download file. It has several menus to exercise the software and to test the placement of the menu panels in different situations. It has buttons for turning the debug mode on and off.