text <b>:</b> &amp;#187<b>; </b><b>:</b> <b>;</b>
</p>
<p>the text characters between the two colons will be used, use &amp;#58; if a colon is to be used.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>css2</td>
<td>
<p>if present, up to five groups of CSS classes separated by comma, specifying the second icon styles for menu item on following stages:</p>
<ul>
<li>normal ... Without mouse focus.</li>
<li>highlighted ... With mouse focus.</li>
<li>mousedowned ... With mouse focus and mouse left-button pressed.</li>
<li>sub-menu opened ... For a sub-menu item with sub-menu opened.</li>
<li>on-path ... When page path is called to display.</li>
</ul>
<p>If the style for a stage is not needed, it can be left blank (keep the comma to indicate it's blank). If some groups are not present, say only three groups are defined, then "sub-menu opened" and "on-path" will not have special style effects.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>text2</td>
<td><p>if present, defines the text characters used as the second icon.</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<br><li>Define a separator style:</li>
<pre>
addStyleSeparator("separator-style-name", "separator-style-phrase");
</pre>
<p>Only one phrase is available:</p>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="6" bgcolor="#ffffff">
<tr valign="top" bgcolor="#cccccc"><td nowrap>Name</td><td>Value</td></tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>css</td>
<td>
<p>up to two groups of CSS classes separated by comma, specifying the styles for two separator lines.</p>
<p>If the second group is blank or missing, the separator will have one line only.</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<br><li>Define a menu style:</li>
<pre>
addStyleMenu("menu-style-name", "pad-style", "item-style", "font-style", "tag-style", "icon-style", "separator-style");
</pre>

<br><li>Define a style group:</li>
<pre>
addStyleGroup("group-style-name", "menu-style-name", "top-menu name", "sub-menu name", ...);
addStyleGroup("group-style-name", "another-menu-style-name", "sub-menu name", "sub-menu name", ...);
</pre>
<p>The addStyleGroup() call can be repeated with same group-style-name but different menu-style-names for different menus.</p>

<br><li>Define the default style:</li>
<pre>
setDefaultStyle("pad-style", "item-style", "font-style", "tag-style", "icon-style", "separator-style");
</pre>

</ul>
</ul>

<a name="instance">&nbsp;</a>
<ul><li>Setting up the instance script ... [ <a href="#top">top</a> ]</li>
<pre>
addInstance("instance-name", "menu-name", "instance-parameter-phrases");
</pre>
<p class="para">The addInstance() call links everything together:</p>
<ul>
<li>the menu content to be used</li>
<li>the position of the menu</li>
<li>the alignment of the menu</li>
<li>the layout of the menu</li>
<li>the visibility of the menu</li>
<li>the behavior for sub-menus</li>
<li>the direction for sub-menus</li>
<li>the target frame for menu links</li>
<li>the menu styles</li>
</ul>
<p class="para">You can repeat the addInstance() call to build more menu instances on a page. If the "instance-name" is defined already, the addInstance() call will delete the existing menu instance and re-build it with the specified menu content.</p>

<p class="para">Following are the parameter phrases available:</p>

<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="6" bgcolor="#ffffff">
<tr valign="top" bgcolor="#cccccc"><td nowrap>Name</td><td>Value</td></tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>position</td>
<td>
<p>strings that specify one of the following values::</p>
<ul>
<li><u>absolute</u> ... Default. The menu instance will be positioned against the top-left browser corner ([0,0]).</li>
<li>relative holder-id ... The menu instance will be positioned against a HTML element (the holder) with the given id.
<p>To define a holder is simple, just create a HTML element with an id attribute, or assign an id to an existing HTML element.</p>
</li>

<li>slot slot-number ... The menu instance will be positioned against a pre-defined slot along the browser border.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>align</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li><u>left</u> ... Default. Align the menu instance on the left side against its position reference point.</li>
<li>center ... Align the menu instance on center against its position reference point.</li>
<li>right ... Align the menu instance on the right side against its position reference point.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>valign</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li><u>top</u> ... Default. Align the menu instance on top against its position reference point.</li>
<li>middle ... Align the menu instance in middle against its position reference point.</li>
<li>bottom ... Align the menu instance on bottom against its position reference point.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>base</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li><u>left</u> ... Default. Takes the left side border of the frame as the reference to align the first level sub-menu to its parent menu item.</li>
<li>right ... Takes the right side border of the frame as the reference to align the first level sub-menu to its parent menu item.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>vbase</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li><u>top</u> ... Default. Takes the top side border of the frame as the reference to align the first level sub-menu to its parent menu item.</li>
<li>bottom ... Takes the bottom side border of the frame as the reference to align the first level sub-menu to its parent menu item.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>offset-top</td>
<td>
<p>number that specifies the top offset in pixel (after the alignment), defaults to 0.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>offset-left</td>
<td>
<p>number that specifies the left offset in pixel (after the alignment), defaults to 0.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>menu-form</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li>bar ... Top menu to be shown as a horizontal menu bar.</li>
<li><u>pad</u> ... Default. Top menu to be shown as a drop-down menu pad.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>direction</td>
<td>
<p>generic direction setting for all sub-menus, see the "direction" phrase in pad style for details.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>visibility</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li><u>visible</u> ... Default. The top menu is always visible once shown.</li>
<li>hidden ... The top menu is invisible after closed.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>target</td>
<td>
<p>string that specifies the name of the generic target window/frame for menu links.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>floating</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li>yes ... The menu instance will be floating against page scrolling.</li>
<li><u>no</u> ... Default. The menu instance is fixed.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>sticky</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li>yes ... Click somewhere outside the menu to collapse it.</li>
<li><u>no</u> ... Default. Mouseout a menu for a while to collapse it.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>highlight</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li><u>yes</u> ... Default. When mouse stays on a sub-menu item, keep all its already opened sub-menus opened.</li>
<li>no ... Only keep the immediate sub-menu opened.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>style</td>
<td>
<p>string that specifies the name of the style group to be used.</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">
</ul>
</ul>

<a name="nonframe">&nbsp;</a>
<ul><li>Setting up a non-frame menu page ... [ <a href="#top">top</a> ]</li>
<p>
<ol>
<li><p>set up the menu content, menu styles and menu instances.</p></li>
<li><p>set up the web paths and other settings in a path script.</p></li>
<li><p>include the path script in the page:</p></li>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="12" bgcolor="#ffffff" width="800">
<tr valign="top" bgcolor="#f0f0f0"><td>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;</p>
<p><b>&lt;script language="javascript" src="your-web-path/path.js"&gt;&lt;/script&gt;</b></p>
<p>&lt;/head&gt;</p>
<p>...</p>
<p>&lt;/html&gt;</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<li><p>include the non-frame loader script in the page:</p></li>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="12" bgcolor="#ffffff" width="800">
<tr valign="top" bgcolor="#f0f0f0"><td>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;script language="javascript" src="your-web-path/path.js"&gt;&lt;/script&gt;</p>
<p><b>&lt;script language="javascript" src="your-web-path/script/menuG5LoaderX.js"&gt;&lt;/script&gt;</b></p>
<p>&lt;/head&gt;</p>
<p>...</p>
<p>&lt;/html&gt;</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<li><p>set up the onload call in the BODY tag:</p></li>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="12" bgcolor="#ffffff" width="800">
<tr valign="top" bgcolor="#f0f0f0"><td>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;script language="javascript" src="your-web-path/path.js"&gt;&lt;/script&gt;</p>
<p>&lt;script language="javascript" src="your-web-path/script/menuG5LoaderX.js"&gt;&lt;/script&gt;</p>
<p>&lt;/head&gt;</p>
<p><b>&lt;body onload="showMenu('menu-instance-name')"&gt;</b></p>
<p>...</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">
<p>If you have more than one menu instance, just call the showMenu() for them respectively:</p>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="12" bgcolor="#ffffff" width="800">
<tr valign="top" bgcolor="#f0f0f0"><td>
<p>...</p>
<p><b>&lt;body onload="showMenu('menu-instance-name'); showMenu('another-menu-instance')"&gt;</b></p>
<p>...</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">
</ol>
</p>
</ul>

<a name="crossframe">&nbsp;</a>
<ul><li>Setting up a cross-frame menu page ... [ <a href="#top">top</a> ]</li>
<p>
<ol>
<li><p>set up the menu content, menu styles and menu instances.</p></li>
<li><p>set up the web paths and other settings in a path script.</p></li>
<li><p>include the path script in the frameset page:</p></li>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="12" bgcolor="#ffffff" width="800">
<tr valign="top" bgcolor="#f0f0f0"><td>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;</p>
<p><b>&lt;script language="javascript" src="your-web-path/path.js"&gt;&lt;/script&gt;</b></p>
<p>&lt;/head&gt;</p>
<p>...</p>
<p>&lt;/html&gt;</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<li><p>include the cross-frame loader script in the frameset page:</p></li>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="12" bgcolor="#ffffff" width="800">
<tr valign="top" bgcolor="#f0f0f0"><td>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;script language="javascript" src="your-web-path/path.js"&gt;&lt;/script&gt;</p>
<p><b>&lt;script language="javascript" src="your-web-path/script/menuG5LoaderFSX.js"&gt;&lt;/script&gt;</b></p>