Menu G5 Specification

yxScripts.com

• Menu G5 package content ... [ top ]

Once unzipped, you should find the following directories and files:

- css ... contains a CSS file used by Menu G5 pages (not used by the menus)

- examples ... contains Menu G5 example pages and CSS files
    - images ... contains image files used by Menu G5 examples
    - menu ... contains JS files used by Menu G5 examples

- faq ... contains documents on Menu G5

- script ... contains Menu G5 scripts

- index.html

• Files to upload to your site ... [ top ]

The files under the "script" directory should be uploaded to your site, and be placed under the same directory (the name of the directory doesn't matter). Or you can simply upload the "script" directory.

• Browser support ... [ top ]

Menu G5 supports the following browsers:

- IE5+/Win

- Gecko Browsers (Netscape6+, Mozilla, Mozilla Firebird & Firefox, Camino, etc.)

- Opera7x

• Conventions and terms ... [ top ]

Compact version :  Menu G5 provides some compact versions of scripts to reduce file size and save bandwidth. A compact version script is non reading-friendly. In most cases, a menu page should use compact version scripts. Loader script :  Refers to one of the following scripts: - menuG5Loader.js ... non-frame loader script - menuG5LoaderX.js ... compact version - menuG5LoaderFS.js ... cross-frame loader script - menuG5LoaderFSX.js ... compact version which could be found under the "script" directory of the Menu G5 package. A loader script should be included in a menu page, it detects the client browser and loads a function script accordingly. Function script :  Refers to one of the following scripts: - menuG5IE.js - menuG5IEX.js - menuG5Gecko.js - menuG5GeckoX.js - menuG5Opera.js - menuG5OperaX.js ... above are the non-frame function scripts - menuG5IEFS.js - menuG5IEFSX.js - menuG5GeckoFS.js - menuG5GeckoFSX.js - menuG5OperaFS.js - menuG5OperaFSX.js ... above are the cross-frame function scripts which could be found under the "script" directory of the Menu G5 package. A menu page does NOT include a function script explicitly, which will be loaded by a loader script to handle browser differences. Frame control script :  Refers to one of the following scripts: - menuG5F.js - menuG5FX.js ... the compact version which could be found under the "script" directory of the Menu G5 package. The frame control script is optional for cross-frame setup, it provides shortcuts to call functions defined in the cross-frame loader script that is included in a frameset page. Usually the frame that shows the top-menu of a cross-frame menu will include the frame control script for convenience and better control. Non-frame menu :  A menu built with the non-frame loader script and the non-frame function scripts. It's not necessarily to be in a non-frame page. A framed page can have a non-frame menu. Cross-frame menu :  A menu built with the cross-frame loader script and the cross-frame function scripts. The loader script should be included in a frameset page and menus can then be built and split into any nested frame. The frameset page that includes the cross-frame loader script is not necessarily to be the top frameset page, and the frame with a cross-frame menu is not necessarily to be the immediate child frame of the frameset. A cross-frame menu can only be split into at most two frames. If a cross-frame menu is split into two frames, one frame will show the top-menu and usually include the frame control script, the other frame will show the sub-menus and usually doesn't need to include any Menu G5 scripts. A cross-frame menu is not always split into two frames, the whole menu can be built just inside one frame. A non-frame menu and a cross-frame menu can be built with the same menu content. Framed or non-framed is just the presentation, it's separated from the menu logic (the content). One page can only have either non-frame menus or cross-frame menus. Path script :  For a loader script to locate a function script, the web path of the "script" directory (or the directory you created to store the function scripts) should be defined. The definition could be embedded directly into the HTML page, or be put in an external JS script and included into the page. This definition should appear in a page source code prior to the loader script. We usually want to overwrite some default settings in Menu G5, and for convenience of maintenance, we often use an external JS script to store the web path definition and other settings, and refer to this JS script as the path script. Content script :  To build a menu with Menu G5, we will need to define the menu content and the menu styles, then set up menu instances with the menu content and menu styles. Similar to the path script, we can embed directly the definition of a menu content into the page, or put it in an external JS script then include it into the page. Style script :  Likewise, we can embed directly the definition of menu styles into the page, or put it in an external JS script then include it into the page. Instance script :  Again, we can embed directly the definition of the menu instances into the page, or put it in an external JS script then include it into the page. It's not necessary to always separate the definitions of menu content, menu styles and menu instances into three different scripts. They can be combined into one JS script, just make sure that the content goes first, followed by the styles then the instances.

• Setting up the path script ... [ top ]

Following are the settings we can put into a path script:

• Web path of the "script" directory (required):

var scriptPath="../script/";

The web path could be an absolute path or a relative path (based on the path of the page that includes the path script). It should end with a "/".



• Web path of the content script (optional):

var contentScript="menu/content.js";

Instead of including it into the page manually, we can set up a "contentScript" line in the path script to have the loader script load it for us.

If a relative path is used, it would be based on the path of the page that includes the loader script.



• Web path of the style script (optional):

var styleScript="menu/style.js";

Instead of including it into the page manually, we can set up a "styleScript" line in the path script to have the loader script load it for us.



• Web path of the instance script (optional):

var instanceScript="menu/instance.js";

Instead of including it into the page manually, we can set up a "instanceScript" line in the path script to have the loader script load it for us.



• Menu timer (optional):

var menuTimer=500;

The menu timer defines the delay in ms from a sub-menu item being mouseovered to its sub-menu showing up, as well as the delay from a out-of-border long menu being mouseovered to it starting to scroll in.

It also sets the delay from a sub-menu being mouseout to the sub-menu going off, which would be two times of the value set (that's 1000 in this case).



• Floating timer (optional):

var floatTimer=100;

The floating timer defines the interval in ms for a floating menu to relocate the position, as well as the interval for a out-of-border long menu to scroll in.



• Floating offset (optional):

var floatOffset=1;

The floating offset defines how fast a floating menu should move to its target position. The larger the value is set, the slower (or smoother) the menu moves.



• Base z-index (optional):

var zBase=2;

The base z-index sets the minimum z-index for the menu layers, so that if you have other DHTML layers in a page, you can adjust this setting to have the menus stay on top of them.



• Menu margin (optional):

var menuMargin=1;

A sub-menu will try to stay-in-view inside the browser window. The menu margin sets the margin in pixels from the browser border that a sub-menu tries to stay away.



• Show message (optional):

var showMessage=1;

By default Menu G5 shows messages at the browser status bar when the menu content is parsed, or a menu instance is initialized or a menu item is mouseovered. Setting the value to 0 will disable the display of messages.



• Show tooltip (optional):

var showToolTip=1;

This line would have Menu G5 show the tooltip when a menu item is mouseovered.



• Inherit styles from parent menu (optional):

var inheritStyle=1;

If a sub-menu doesn't have some menu styles defined for it, it will inherit the menu styles from the parent menu.

In Menu G5 you can define some default menu styles. When this line is set to 0, a sub-menu without menu style would use the default styles.



• Minimum item width (optional):

var minimumWidth=0;

In Menu G5, you can specify the width for menu items or let Menu G5 figure out by itself the minimum width to fit the menu items at each level of menus. When you don't specify a width and this line is set to a non-zero value, Menu G5 will not use a width less than that.



• One-pixel transparent GIF (optional):

var onePixelGIF="images/my-one-pixel.gif";

Menu G5 will use a one-pixel transparent GIF file in menu rendering. The Menu G5 package comes with such a GIF file which can be found under the "script" directory. By setting up this line, you can have Menu G5 use your own one-pixel GIF file.



• Base frameset (optional, for cross-frame only):

var baseFrameset=top.another_frameset;

As mentioned earlier, the frameset that includes the cross-frame loader script is not necessary to be the top frameset, we usually call this frameset the control frameset. By default the control frameset would be the base for Menu G5 to locate a target frame when a menu item is clicked. If the target frame is not nested inside the control frameset, you can set up this line to specify a frameset for Menu G5 to look for the target frame.

A target frame can be nested at any frameset level. If the target frame is not found, a link will be opened in a new window named with the target frame name.



• Page to be loaded when browser is not supported (optional):

var nonMenuPage=URL;

When a browser not supported by Menu G5 is detected, the defined URL will be loaded.



• Safari support switch (optional):

var supportSafari=0;

Put on this line when you want to turn off support of Safari.



• IE/Mac support switch (optional):

var supportIEMac=0;

Put on this line when you want to turn off support of IE on Mac.

• Setting up the content script ... [ top ]

The names used in definitions of menus and sub-menus should be unique. The following function calls can be used to set up a menu content:

• Define a menu:

addMenu("menu-name", "top-menu-name");

More than one menu can be defined in a menu content script and each menu would start with the addMenu() call. If the "menu-name" is already defined, the addMenu() call will delete the existing menu content and re-create one from scratch.



• Define a link item:

addLink("top/sub-menu-name", "item text", "item msg", "URL", "group-id");
addLink("top/sub-menu-name", "item text", "item msg", "URL", "group-id", "target-frame-name");

Usually a generic target frame can be defined with the menu instance, the second addLink() call is for cross-frame menus as a shortcut to define a target frame rather than the generic one for some links. The target frame parameter will be ignored by non-frame menus.



• Define a command item:

addCommand("top/sub-menu-name", "item text", "item msg", "JS-codes", "group-id");
addLink("top/sub-menu-name", "item text", "item msg", "javascript:JS-codes", "group-id");

To open a link in a new window in non-frame menus, you can use:

addCommand("sub-menu-name", "item text", "item msg", "window.open('URL', 'window-name')", "group-id");
addLink("sub-menu-name", "item text", "item msg", "javascript:window.open('URL', 'window-name')", "group-id");



• Define a sub-menu item:

addSubMenu("top/sub-menu-name", "item text", "item msg", "URL", "sub-menu-name", "group-id");
addSubMenu("top/sub-menu-name", "item text", "item msg", "URL", "sub-menu-name", "group-id", "target-frame-name");

The "URL" parameter is optional. If set, clicking on a sub-menu item can also launch a link.



• Define an info item:

addInfo("top/sub-menu-name", "info content", "group-id");

HTML codes can be used as info content.



• Define a separator item:

addSeparator("top/sub-menu-name", "group-id");

• Setting up the style script ... [ top ]

The following function calls can be used to set up the menu styles:

• Define a pad style:

addStylePad("pad-style-name", "pad-style-phrases");

Style phrases are in "name:value;" format. When a phrase is missing, its default setting will be taken.

Following are style phrases available:

Name Value holder-css CSS classes for the menu holder, usually IE effects on the whole menu will apply here. pad-css CSS classes for the menu pad, usually for settings of border, background and padding menu-form string that specifies one of the following values: bar ... To be shown as a horizontal menu bar. pad ... Default. To be shown as a drop-down menu pad. direction string that specifies one of the following values: right-down ... Default. If the parent menu is a menu pad, show the sub-menu on right side and align the sub-menu and its parent item on top. If the parent menu is a menu bar, show the sub-menu below and align the sub-menu and its parent item on left side. right-up ... For menu pad, show the sub-menu on right side and align the sub-menu and its parent item on bottom. For menu bar, show the sub-menu above and align the sub-menu and its parent item on left side. left-down ... For menu pad, show the sub-menu on left side and align the sub-menu and its parent item on top. For menu bar, show the sub-menu below and align the sub-menu and its parent item on right side. left-up ... For menu pad, show the sub-menu on left side and align the sub-menu and its parent item on bottom. For menu bar, show the sub-menu above and align the sub-menu and its parent item on right side. center-down ... For menu bar only. Show the sub-menu below and align the sub-menu and its parent item on center. center-up ... For menu bar only. Show the sub-menu above and align the sub-menu and its parent item on center. abs-right-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on right side. abs-right-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on right side. abs-left-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on left side. abs-left-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on left side. abs-center-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on center. abs-center-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on center. right-top ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu on top. left-top ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu on top. right-middle ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu in middle. left-middle ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu in middle. right-bottom ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu on bottom. left-bottom ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu on bottom. scroll string that specifies one of the following values: both ... For a out-of-border long menu, when the menu item that is next to the border is mouseovered, scroll it into view. x-only ... Only scroll in x-direction. y-only ... Only scroll in y-direction. none ... Default. Don't scroll the menu. step number that specifies one of the following values: 0 ... Default. For the out-of-border long menu, scroll in one menu item each time. any non-zero integer ... Number of pixels to scroll in each time. flip string that specifies one of the following values: yes ... Default. If a sub-menu goes beyond the browser border, flip it to the other side of its parent menu. no ... Don't flip the sub-menu. offset-top number that specifies the top offset in pixel (after the direction placement), defaults to 0. offset-left number that specifies the left offset in pixel (after the direction placement), defaults to 0. item-offset up to two numbers (can be negative) separated by space, specifying the offsets in pixel between menu items, defaults to 0. col number of menu item column in a pad. row number of menu item row in a pad. filters (IE only) up to two strings separated by space or comma, each specifying one of the following values: yes ... Show IE transition filters. no ... Do not show IE transition filters. the first string sets value for when a menu pad shows up, defaults to yes; the second string if present sets value for when a menu pad hides, defaults to no. For example: filters: yes, no; tiles specify the background tile images for the menu pad in the following format: tiles: width, height : css1, css2, css3, css4, css5, css6, css7, css8, css9; in which the width and the height specify the size of the corners, and css1 to css9 specify the background images for the tiles. depending on the width and the height, the tiles can be: width>0, height>0 width=0, height>0 width>0, height=0 css1 css2 css3 css4 css5 css6 css7 css8 css9 css2 css5 css8 css4 css5 css6 usually the background images defined for css1, css3, css7 and css9 would fill the corners, and images for css2, css4, css5, css6 and css8 would be repeatable to connect the corners.




• Define an item style:

addStyleItem("item-style-name", "item-style-phrases");

Style phrases are in "name:value;" format. Following are style phrases available:

Name Value css up to five groups of CSS classes separated by comma, specifying the styles for menu item on following stages: normal ... Without mouse focus. highlighted ... With mouse focus. mousedowned ... With mouse focus and mouse left-button pressed. sub-menu opened ... For a sub-menu item with sub-menu opened. on-path ... When page path is called to display. 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. cursor CSS classes that specify the cursor style when a menu item gets mouse focus. align string that specifies one of the following values (when a menu item has different sizes at different stages): left ... Align a menu item on the left side for different stages. center ... Default. Align a menu item on center. right ... Align a menu item on the right side. valign string that specifies one of the following values (when a menu item has different sizes at different stages): top ... Align a menu item on the top for different stages. middle ... Default. Align a menu item in middle. bottom ... Align a menu item on bottom. width actual ... Indicates that the CSS classes have not specified a width for the menu items. sub-menu string that specifies one of the following values: mouse-over ... Default. Hover a sub-menu item to open its sub-menu. mouse-click ... Click a sub-menu item to open its sub-menu. filters (IE only) up to three strings separated by space or comma, each specifying one of the following values: yes ... Show IE transition filters. no ... Do not show IE transition filters. the first string sets value for when a menu item changes back to normal stage (mouseout), defaults to no; the second string if present sets value for when a menu item becomes highlighted (mouseover), defaults to yes; the third string if present sets value for when a menu item gets mousedown, defaults to no. For example: filters: yes, yes, yes;




• Define a font style:

addStyleFont("font-style-name", "font-style-phrase");

Only one phrase is available:

Name Value css up to five groups of CSS classes separated by comma, specifying the font styles for menu item on following stages: normal ... Without mouse focus. highlighted ... With mouse focus. mousedowned ... With mouse focus and mouse left-button pressed. sub-menu opened ... For a sub-menu item with sub-menu opened. on-path ... When page path is called to display. 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.




• Define a sub-menu tag style:

addStyleTag("tag-style-name", "tag-style-phrase");

Only one phrase is available:

Name Value css up to five groups of CSS classes separated by comma, specifying the sub-menu tag styles for sub-menu item on following stages: normal ... Without mouse focus. highlighted ... With mouse focus. mousedowned ... With mouse focus and mouse left-button pressed. sub-menu opened ... For a sub-menu item with sub-menu opened. on-path ... When page path is called to display. 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.




• Define an icon style:

addStyleIcon("icon-style-name", "icon-style-phrase");

The following phrases are available:

Name Value css up to five groups of CSS classes separated by comma, specifying the icon styles for menu item on following stages: normal ... Without mouse focus. highlighted ... With mouse focus. mousedowned ... With mouse focus and mouse left-button pressed. sub-menu opened ... For a sub-menu item with sub-menu opened. on-path ... When page path is called to display. 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. text if present, defines in following format the text characters used as the icon, for example: text : » : ; the text characters between the two colons will be used, use : if a colon is to be used. css2 if present, up to five groups of CSS classes separated by comma, specifying the second icon styles for menu item on following stages: normal ... Without mouse focus. highlighted ... With mouse focus. mousedowned ... With mouse focus and mouse left-button pressed. sub-menu opened ... For a sub-menu item with sub-menu opened. on-path ... When page path is called to display. 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. text2 if present, defines the text characters used as the second icon.




• Define a separator style:

addStyleSeparator("separator-style-name", "separator-style-phrase");

Only one phrase is available:

Name Value css up to two groups of CSS classes separated by comma, specifying the styles for two separator lines. If the second group is blank or missing, the separator will have one line only.




• Define a menu style:

addStyleMenu("menu-style-name", "pad-style", "item-style", "font-style", "tag-style", "icon-style", "separator-style");



• Define a style group:

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", ...);

The addStyleGroup() call can be repeated with same group-style-name but different menu-style-names for different menus.



• Define the default style:

setDefaultStyle("pad-style", "item-style", "font-style", "tag-style", "icon-style", "separator-style");

• Setting up the instance script ... [ top ]

addInstance("instance-name", "menu-name", "instance-parameter-phrases");

The addInstance() call links everything together:

• the menu content to be used
• the position of the menu
• the alignment of the menu
• the layout of the menu
• the visibility of the menu
• the behavior for sub-menus
• the direction for sub-menus
• the target frame for menu links
• the menu styles

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.

Following are the parameter phrases available:

Name Value position strings that specify one of the following values:: absolute ... Default. The menu instance will be positioned against the top-left browser corner ([0,0]). relative holder-id ... The menu instance will be positioned against a HTML element (the holder) with the given id. To define a holder is simple, just create a HTML element with an id attribute, or assign an id to an existing HTML element. slot slot-number ... The menu instance will be positioned against a pre-defined slot along the browser border. align string that specifies one of the following values: left ... Default. Align the menu instance on the left side against its position reference point. center ... Align the menu instance on center against its position reference point. right ... Align the menu instance on the right side against its position reference point. valign string that specifies one of the following values: top ... Default. Align the menu instance on top against its position reference point. middle ... Align the menu instance in middle against its position reference point. bottom ... Align the menu instance on bottom against its position reference point. base string that specifies one of the following values: left ... Default. Takes the left side border of the frame as the reference to align the first level sub-menu to its parent menu item. right ... Takes the right side border of the frame as the reference to align the first level sub-menu to its parent menu item. vbase string that specifies one of the following values: top ... Default. Takes the top side border of the frame as the reference to align the first level sub-menu to its parent menu item. bottom ... Takes the bottom side border of the frame as the reference to align the first level sub-menu to its parent menu item. offset-top number that specifies the top offset in pixel (after the alignment), defaults to 0. offset-left number that specifies the left offset in pixel (after the alignment), defaults to 0. menu-form string that specifies one of the following values: bar ... Top menu to be shown as a horizontal menu bar. pad ... Default. Top menu to be shown as a drop-down menu pad. direction generic direction setting for all sub-menus, see the "direction" phrase in pad style for details. visibility string that specifies one of the following values: visible ... Default. The top menu is always visible once shown. hidden ... The top menu is invisible after closed. target string that specifies the name of the generic target window/frame for menu links. floating string that specifies one of the following values: yes ... The menu instance will be floating against page scrolling. no ... Default. The menu instance is fixed. sticky string that specifies one of the following values: yes ... Click somewhere outside the menu to collapse it. no ... Default. Mouseout a menu for a while to collapse it. highlight string that specifies one of the following values: yes ... Default. When mouse stays on a sub-menu item, keep all its already opened sub-menus opened. no ... Only keep the immediate sub-menu opened. style string that specifies the name of the style group to be used.

• Setting up a non-frame menu page ... [ top ]

1. set up the menu content, menu styles and menu instances.

2. set up the web paths and other settings in a path script.

3. include the path script in the page:

<html> <head> <script language="javascript" src="your-web-path/path.js"></script> </head> ... </html>




4. include the non-frame loader script in the page:

<html> <head> <script language="javascript" src="your-web-path/path.js"></script> <script language="javascript" src="your-web-path/script/menuG5LoaderX.js"></script> </head> ... </html>




5. set up the onload call in the BODY tag:

<html> <head> <script language="javascript" src="your-web-path/path.js"></script> <script language="javascript" src="your-web-path/script/menuG5LoaderX.js"></script> </head> <body onload="showMenu('menu-instance-name')"> ... </body> </html>




If you have more than one menu instance, just call the showMenu() for them respectively:

... <body onload="showMenu('menu-instance-name'); showMenu('another-menu-instance')"> ...

• Setting up a cross-frame menu page ... [ top ]

1. set up the menu content, menu styles and menu instances.

2. set up the web paths and other settings in a path script.

3. include the path script in the frameset page:

<html> <head> <script language="javascript" src="your-web-path/path.js"></script> </head> ... </html>




4. include the cross-frame loader script in the frameset page:

<html> <head> <script language="javascript" src="your-web-path/path.js"></script> <script language="javascript" src="your-web-path/script/menuG5LoaderFSX.js"></script> </head> ... </html>




5. name the target frame according to the "target:" phrase in the addInstance() call:

<html> <head> <script language="javascript" src="your-web-path/path.js"></script> <script language="javascript" src="your-web-path/script/menuG5LoaderFSX.js"></script> </head> <frameset> <frame src="..."></frame> <frame src="..." name="content"></frame> </frameset> </html>




6. include the frame control script in the top-menu frame page:

<html> <head> <script language="javascript" src="your-web-path/script/menuG5FX.js"></script> </head> ... </html>




7. set up the onload call in the BODY tag of the top-menu frame page:

<html> <head> <script language="javascript" src="your-web-path/script/menuG5FX.js"></script> </head> <body onload="initMenu('instance-name', 'top'); setSubFrame('instance-name', parent.content);"> ... </body> </html>




8. The pages to be loaded into the target frame could be just regular HTML pages, no Menu G5 setting is needed.

• Default settings ... [ top ]

Default settings can be found in the source code of a loader script (either regular or compact version):

// ------
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;
// ------

These default settings can be overwritten by the settings in a path script.

• User functions ... [ top ]

Menu G5 provides the following user functions for more controls on a menu instance:

User Function Description & Usage getMenuDim("ins-name") Find out the dimension of the specified menu instance. If the menu instance is ready (shown once), it returns a JS object with the following attributes: x ... the x-coordinate of the top-menu pad y ... the y-coordinate of the top-menu pad width ... the width of the top-menu pad height ... the height of the top-menu pad scrollx ... the x-scroll-offset of the page scrolly ... the y-scroll-offset of the page Sample: var insDim=getMenuDim("ins-name"); if (insDim!=null) { alert("The size is " + insDim.width + " x " + insDim.height); } getLeft("id") returns the x-coordinate of a HTML element with the given id. getTop("id") returns the y-coordinate of a HTML element with the given id. showMenu("ins-name") Display the top-menu of the specified menu instance if found. Sample: <body onload="showMenu('my-menu')"> showMenuX("ins-name") Display the top-menu of the specified menu instance if found and set its top-menu visibility to visible. Sample: <a href="#" onmouseover="showMenuX('my-menu')">Menu</a> hideMenu("ins-name") Collapse the specified menu instance if found. Sample: <a href="#" ... onmouseout="hideMenu('my-menu')">Menu</a> hideMenuX("ins-name") Collapse the specified menu instance if found and set its top-menu visibility to hidden. Sample: <a href="#" ... onmouseout="hideMenuX('my-menu')">Menu</a> moveMenuTo("ins-name", x, y) Collapse and move the specified menu instance, if found, to the given coordinates. Sample: <a href="javascript:moveMenuTo('my-menu', 10, 10)">Go [10,10]</a> moveMenuBy("ins-name", dx, dy) Collapse and move the specified menu instance, if found, by the given offset. Sample: <a href="javascript:moveMenuBy('my-menu', 0, 10)">Move down a bit</a> moveMenuBack("ins-name") Collapse and move the specified menu instance, if found, back to its original position. Sample: <a href="javascript:moveMenuBack('my-menu')">Go home</a> openMenu("ins-name") Display the top-menu of the specified menu instance if found after the delay set by the "menuTimer". Sample: <a href="#" onmouseover="openMenu('my-menu')">Menu</a> openMenuX("ins-name") 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. Sample: <a href="#" onmouseover="openMenuX('my-menu')">Menu</a> closeMenu("ins-name") Collapse the specified menu instance if found after the delay set by the "menuTimer". Sample: <a href="#" ... onmouseout="closeMenu('my-menu')">Menu</a> closeMenuX("ins-name") Collapse the specified menu instance if found after the delay set by the "menuTimer" and set its top-menu visibility to hidden. Sample: <a href="#" ... onmouseout="closeMenuX('my-menu')">Menu</a> closeMenuNow() Collapse all the menu instances. Sample: <a href="javascript:closeMenuNow()">Collapse All</a> clickMenu("ins-name") Same effect as showMenu() but usually used on clicks. Sample: <a href="javascript:clickMenu('my-menu')">Click to open</a> clickMenuX("ins-name") Like clickMenu() but also set menu instance visibility to visible. Sample: <a href="javascript:clickMenuX('my-menu')">Click to open</a> switchMenu("ins-name") Like calling showMenuX() and hideMenuX() in sequence. Sample: <a href="javascript:switchMenu('my-menu')">Click to switch</a> setHolder("ins-name", "holder-id") 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. Sample: <a id="here" href="javascript:setHolder('my-ins', 'here'); clickMenuX('my-ins');>Here</a> setCoordinates("ins-name", x, y) 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. Sample: <a href="javascript:setHolder('my-ins', 10, 10); clickMenuX('my-ins');>Go [10,10]</a> slideMenuBack("ins-name") 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. Sample: usually used in the instance script. showPagePath("ins-name", ...) This user function expects the first parameter to be the name of a menu instance, followed by a list of group-ids. 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. Sample: <body onload="showPagePath('vehicles', 'honda', 'cars', 'accord')"> resetPagePath("ins-name") Restore the menu items to normal style which are set by a showPagePath() call. addMenuEvent("name", "e1", "e2") addMenuEvent() lets you execute some JS codes when a menu shows and hides. 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. addMenuEvent() should be called before the specified menu shows for the first time. Sample: addMenuEvent("top-menu", "alert('Menu is ready')", ""); addItemEvent("id", "e1", "e2") addItemEvent() lets you execute some JS codes when mouseover and mouseout items. 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.

Back to index page

# # #