<p>&lt;/head&gt;</p>
<p>...</p>
<p>&lt;/html&gt;</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<li><p>name the target frame according to the "target<b>:</b>" phrase in the addInstance() call:</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/menuG5LoaderFSX.js"&gt;&lt;/script&gt;</p>
<p>&lt;/head&gt;</p>
<p>&lt;frameset&gt;</p>
<p class="para">&lt;frame src="..."&gt;&lt;/frame&gt;
<p class="para">&lt;frame src="..." <b>name="content"</b>&gt;&lt;/frame&gt;
<p>&lt;/frameset&gt;</p>
<p>&lt;/html&gt;</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<li><p>include the frame control script in the top-menu frame 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/script/menuG5FX.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 of the top-menu frame 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/script/menuG5FX.js"&gt;&lt;/script&gt;</p>
<p>&lt;/head&gt;</p>
<p>&lt;body onload=<b>"initMenu('instance-name', 'top'); setSubFrame('instance-name', parent.content);"</b>&gt;</p>
<p>...</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">
<li><p>The pages to be loaded into the target frame could be just regular HTML pages, no Menu G5 setting is needed.</p></li>
</ol>
</p>
</ul>

<a name="default">&nbsp;</a>
<ul><li>Default settings ... [ <a href="#top">top</a> ]</li>
<p class="para">Default settings can be found in the source code of a loader script (either regular or compact version):</p>
<pre>
// ------
var _scriptPath="http://www.yxScripts.com/menuG5/script/";
var _menuTimer=500;
var _floatTimer=100;
var _floatOffset=1;
var _zBase=2;
var _menuMargin=1;
var _showMessage=1;
var _showToolTip=0;
var _onePixelGIF="onePixel.gif";
var _baseFrameset=self;
var _inheritStyle=1;
var _minimumWidth=0;
// ------
</pre>
<p class="para">These default settings can be overwritten by the settings in a path script.</p>
</ul>

<a name="userfunction">&nbsp;</a>
<ul><li>User functions ... [ <a href="#top">top</a> ]</li>
<p class="para">Menu G5 provides the following user functions for more controls on a menu instance:</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>User Function</td><td>Description & Usage</td></tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>getMenuDim("ins-name")</td>
<td>
<p>Find out the dimension of the specified menu instance.</p>
<p>If the menu instance is ready (shown once), it returns a JS object with the following attributes:</p>
<ul>
<li>x ... the x-coordinate of the top-menu pad</li>
<li>y ... the y-coordinate of the top-menu pad</li>
<li>width ... the width of the top-menu pad</li>
<li>height ... the height of the top-menu pad</li>
<li>scrollx ... the x-scroll-offset of the page</li>
<li>scrolly ... the y-scroll-offset of the page</li>
</ul>
<p>Sample:</p>
<pre>
var insDim=getMenuDim("ins-name");

if (insDim!=null) {
  alert("The size is " + insDim.width + " x " + insDim.height);
}
</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>getLeft("id")</td>
<td>
<p>returns the x-coordinate of a HTML element with the given id.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>getTop("id")</td>
<td>
<p>returns the y-coordinate of a HTML element with the given id.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>showMenu("ins-name")</td>
<td>
<p>Display the top-menu of the specified menu instance if found.</p>
<p>Sample:</p>
<pre>&lt;body onload="showMenu('my-menu')"&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>showMenuX("ins-name")</td>
<td>
<p>Display the top-menu of the specified menu instance if found and set its top-menu visibility to visible.</p>
<p>Sample:</p>
<pre>&lt;a href="#" onmouseover="showMenuX('my-menu')"&gt;Menu&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>hideMenu("ins-name")</td>
<td>
<p>Collapse the specified menu instance if found.</p>
<p>Sample:</p>
<pre>&lt;a href="#" ... onmouseout="hideMenu('my-menu')"&gt;Menu&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>hideMenuX("ins-name")</td>
<td>
<p>Collapse the specified menu instance if found and set its top-menu visibility to hidden.</p>
<p>Sample:</p>
<pre>&lt;a href="#" ... onmouseout="hideMenuX('my-menu')"&gt;Menu&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>moveMenuTo("ins-name", x, y)</td>
<td>
<p>Collapse and move the specified menu instance, if found, to the given coordinates.</p>
<p>Sample:</p>
<pre>&lt;a href="javascript:moveMenuTo('my-menu', 10, 10)"&gt;Go [10,10]&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>moveMenuBy("ins-name", dx, dy)</td>
<td>
<p>Collapse and move the specified menu instance, if found, by the given offset.</p>
<p>Sample:</p>
<pre>&lt;a href="javascript:moveMenuBy('my-menu', 0, 10)"&gt;Move down a bit&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>moveMenuBack("ins-name")</td>
<td>
<p>Collapse and move the specified menu instance, if found, back to its original position.</p>
<p>Sample:</p>
<pre>&lt;a href="javascript:moveMenuBack('my-menu')"&gt;Go home&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>openMenu("ins-name")</td>
<td>
<p>Display the top-menu of the specified menu instance if found after the delay set by the "menuTimer".</p>
<p>Sample:</p>
<pre>&lt;a href="#" onmouseover="openMenu('my-menu')"&gt;Menu&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>openMenuX("ins-name")</td>
<td>
<p>Display the top-menu of the specified menu instance if found after the delay set by the "menuTimer" and set its top-menu visibility to visible.</p>
<p>Sample:</p>
<pre>&lt;a href="#" onmouseover="openMenuX('my-menu')"&gt;Menu&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>closeMenu("ins-name")</td>
<td>
<p>Collapse the specified menu instance if found after the delay set by the "menuTimer".</p>
<p>Sample:</p>
<pre>&lt;a href="#" ... onmouseout="closeMenu('my-menu')"&gt;Menu&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>closeMenuX("ins-name")</td>
<td>
<p>Collapse the specified menu instance if found after the delay set by the "menuTimer" and set its top-menu visibility to hidden.</p>
<p>Sample:</p>
<pre>&lt;a href="#" ... onmouseout="closeMenuX('my-menu')"&gt;Menu&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>closeMenuNow()</td>
<td>
<p>Collapse all the menu instances.</p>
<p>Sample:</p>
<pre>&lt;a href="javascript:closeMenuNow()"&gt;Collapse All&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>clickMenu("ins-name")</td>
<td>
<p>Same effect as showMenu() but usually used on clicks.</p>
<p>Sample:</p>
<pre>&lt;a href="javascript:clickMenu('my-menu')"&gt;Click to open&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>clickMenuX("ins-name")</td>
<td>
<p>Like clickMenu() but also set menu instance visibility to visible.</p>
<p>Sample:</p>
<pre>&lt;a href="javascript:clickMenuX('my-menu')"&gt;Click to open&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>switchMenu("ins-name")</td>
<td>
<p>Like calling showMenuX() and hideMenuX() in sequence.</p>
<p>Sample:</p>
<pre>&lt;a href="javascript:switchMenu('my-menu')"&gt;Click to switch&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>setHolder("ins-name", "holder-id")</td>
<td>
<p>Force the specified menu instance if found to refer to the given holder when it positions itself next time. This call replaces the instance's original position.</p>
<p>Sample:</p>
<pre>&lt;a id="here" href="javascript:setHolder('my-ins', 'here'); clickMenuX('my-ins');&gt;Here&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>setCoordinates("ins-name", x, y)</td>
<td>
<p>Force the specified menu instance if found to refer to the given coordinates when it positions itself next time. This call replaces the instance's original position.</p>
<p>Sample:</p>
<pre>&lt;a href="javascript:setHolder('my-ins', 10, 10); clickMenuX('my-ins');&gt;Go [10,10]&lt;/a&gt;</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>slideMenuBack("ins-name")</td>
<td>
<p>Move the specified menu instance if found back to the original position when it collapses. Usually used on some out-of-view menu instance for slide-in/slide-out effects. This user function actually calls moveMenuBack() when the menu instance collapses.</p>
<p>Sample: usually used in the instance script.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>showPagePath("ins-name", ...)</td>
<td>
<p>This user function expects the first parameter to be the name of a menu instance, followed by a list of group-ids.</p>
<p>What it does is to look for the menu item with the first group id (the second parameter) from the top-menu of the specified menu instance, if the menu item is found, apply the on-path style to it, and if the menu item is a sub-menu item, then look for the menu item with the second group id (the third parameter) from its sub-menu, if found, apply the on-path style, and so on so forth until it reaches the last group id, or the menu item is not a sub-menu item or no menu item found matching the group id.</p>
<p>Sample:</p>
<pre>
&lt;body onload="showPagePath('vehicles', 'honda', 'cars', 'accord')"&gt;
</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>resetPagePath("ins-name")</td>
<td>
<p>Restore the menu items to normal style which are set by a showPagePath() call.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>addMenuEvent("name", "e1", "e2")</td>
<td>
<p>addMenuEvent() lets you execute some JS codes when a menu shows and hides.</p>
<p>The "name" is the name of a top-menu or sub-menu defined in the menu content, "e1" would be some JS codes to be executed when the specified menu shows up, and "e2" would be JS codes to be executed when the menu hides.</p>
<p>addMenuEvent() should be called before the specified menu shows for the first time.</p>
<p>Sample:</p>
<pre>
addMenuEvent("top-menu", "alert('Menu is ready')", "");
</pre>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>addItemEvent("id", "e1", "e2")</td>
<td>
<p>addItemEvent() lets you execute some JS codes when mouseover and mouseout items.</p>
<p>The "id" is the group id of items defined in the menu content, "e1" would be some JS codes to be executed when any of these items gets mouse focus, and "e2" would be JS codes to be executed when any of the items loses mouse focus.</p>
</td>
</tr>

</table>
</td></tr></table>
</ul>

<p>&nbsp;</p>
<p class="para"><a href="../index.html">Back to index page</a></p>
<p align="center"># # #</p>
<p>&nbsp;</p>
</body>

</html>