Differences between Menu G4 and Menu G5

yxScripts.com

If you are migrating from Menu G4 to Menu G5, you will be interested in the following differences:

• Menu Content

1. addSeparator()

In Menu G4, you have addSeparator("menu-name").

In Menu G5, you can also have addSeparator("menu-name", "group-id").



• Menu Styling ... when a menu does not link to a menu style, Menu G4 will look for the default style set by setDefaultStyles(), Menu G5 will look at the inheritStyle variable to decide whether to acquire the style from the parent menu or use the default style set by setDefaultStyles().

1. addStylePad

In Menu G4, the addStylePad() call can have the following phrases for styles:

• border-size: number;
• border-style: outset/inset/solid;
• border-color: color string;
• border-sides: numbers;
• padding: numbers;
• background-color: color string;
• opacity: number;

In Menu G5, it only has two phrases for that:

• pad-css: css-class-names;
• holder-css: css-class-names;


In Menu G4, the "scroll:" phrase is like this:

• scroll: yes/no;

In Menu G5, it becomes:

• scroll: both/x-only/y-only/none; ... defaults to none.

Menu G5 also adds two new phrases: "flip:" and "step:":

• flip: yes/no; ... whether sub-menu should flip into view, defaults to yes.
• step: number; ... whether to scroll a long menu one item each time (number = 0) or by some offset (specified by number in pixel).

and adds a new option "abs-center" for the "direction:" phrase:

• direction: .../abs-center-up/abs-center-down/...;


2. addStyleItem

In Menu G4, the addStyleItem() call can have the following phrases for styles:

• width: number;
• height: number;
• border-size: number;
• border-style: outset/inset/solid;
• border-color: color string;
• border-sides: numbers;
• padding: numbers;
• background-color: color string;
• opacity: number;

In Menu G5, it only has two phrases for that:

• width: fixed/actual; ... defaults to fixed.
• css: css-class-names;

and adds two new phrases for item alignment:

• align: left/center/right; ... defaults to center.
• valign: top/middle/bottom; ... defaults to middle.

and one new phrase for item cursor:

• cursor: css-class-name; ... for cursor settings only.


3. addStyleFont

In Menu G4, the addStyleFont() call can have the following phrases for styles:

• font-family: font-names;
• font-size: number;
• font-weight: normal/bold;
• font-style: normal/italic;
• text-decoration: none/underline;
• color: color string;
• text-align: left/center/right;
• vertical-align: top/middle;

In Menu G5, it only has one phrase for that:

• css: css-class-names;


4. addStyleTag

In Menu G4, the addStyleTag() call can have the following phrases for styles:

• visibility: visible/hidden;
• path: path string;
• tag-normal: image string;
• tag-highlight: image string;
• width: number;
• height: number;
• align: left/right;
• valign: top/middle;

In Menu G5, it only has one phrase for that:

• css: css-class-names;


5. addStyleSeparator

In Menu G4, the addStyleSeparator() call can have the following phrases for styles:

• style: outset/inset/solid;
• color: color string;
• size: number;

In Menu G5, it only has one phrase for that:

• css: css-class-names;


6. addStyleIcon

In Menu G4, the following JS calls will be used to setup the images:

• setImage() ... to use image as menu item
• setIcon() ... to use image icon in menu item
• setBGImage() ... to set up background image for menu pad and menu item

In Menu G5, it changes to:

• use addStyleIcon(icon-style-name, "css:css-class-names") ... to use image icon in menu item
• set "background" property in CSS classes to use background image for menu pad and menu item, and
• set item text to blank ("") to use image as menu item


7. addStyleMenu

In Menu G4, it would be:

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

In Menu G5, it changes to:

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


8. default style

In Menu G4, it would have some default styles.

In Menu G5, it changes to use the default style of the current page if you don't define some.



• Menu Positioning

1. relative positioning

In Menu G4, it would have the following phrase in the addInstance() call:

• position:relative holder holder2;

and you would have the following double-holder codes in the page:

<div id="holder" style="position:absolute">&nbsp;</div>
<div id="holder2" style="position:relative">&nbsp;</div>




In Menu G5, it would be:

• position:relative holder;

and the place holder in page would look like this:

<div id="holder"></div>

or you can just put id="holder" in any block elements.



• Path script

1. menuTimer & menuTimerBar

In Menu G4, menuTimer controls the timing for sub-menus of drop-down menus and menuTimerBar controls the timing for immediate sub-menus of menu bars.

In Menu G5, only the menuTimer is used.



2. imagePath

In Menu G4, imagePath sets the path for sub-menu tags and the onePixel.gif.

In Menu G5, imagePath is no longer used, sub-menu tags would be defined in css, and the onePixel.gif in now under scriptPath.



3. menuMargin

New in Menu G5, defines how close a sub-menu can get to the browser border, defaults to 1 (pixel).



4. showMessage

New in Menu G5, defines whether to show item message in status bar or not, defaults to 1 (show).



5. showToolTip

New in Menu G5, defines whether to show item tooltip or not, defaults to 0 (not show).



6. onePixelGIF

New in Menu G5, defines the path for the one pixel image if the default onePixel.gif is not used.



7. inheritStyle

New in Menu G5, defines whether to acquire menu style from the parent menu or to use the default style set by setDefaultStyle(), defaults to 1 (to acquire style from parent menu).



8. minimumWidth

New in Menu G5, defines the minimum item width for menus using actual item width.

Back to index page

# # #