Menu G4 Examples

Example One: Using Background Images

Menu G4 supports both images as items and images as background for items. With images as items, you can design special effects for the item text since it's all graphics but on the other hand you will need images for each menu item. The advantage of using background images is to use less images and to give more flexibility to integrate image icon and sub-menu tag into a menu item.

You can use images as background for the menu pads and the menu items, both following the same syntax:

for a menu pad:

setBGImage("top/sub-menu-name", "image-path", "image-name", "");

for a menu item:

setBGImage("item-group-id, "image-path", "normal-image-name", "highlight-image-name");

and to use images as items, we have:

setImage("item-group-id", "image-path", "normal-image-name", "highlight-image-name", image-width, image-height);

The "image-path" parameter is worthy of some attentions since we have the "imagePath" variable defined in the path script.

If the "image-path" starts with "./", "/" or "http://", Menu G4 will specify the image as:

[image-path] + [image-name]

otherwise, it would be:

[imagePath] + [image-path] + [image-name]

In this example, we set the background images for all the menu items except for those on top and bottom of a pad, which will be using images as items.

Following are the item images (for top & bottom items) and background images (for "regular" items) used in the top-menu:

normal	highlight

and following are the item images and background images used in sub-menus:

normal	highlight

The images used in sub-menus are a bit wider than those used in the top-menu as we have some special images to "connect" a sub-menu to its parent menu.

To link different item images and background images to menu items, we group the items by setting their group id:

the top and bottom item of a pad would use the top image and the bottom image respectively.
the "regular" items on top-menu will use the "regular" top-menu background images.
the first "regular" item on a sub-menu will use the "connection" background images.
other "regular" items on a sub-menu will use the "regular" sub-menu background images.

We also set the height in item styles to the height of the images, and give the items some padding height so that the item text can display at the right place. For the top and bottom items, we define a item-level style for them with a lower height.

Usually when a sub-menu pops up, its first item will align with the parent sub-menu item. In our case, we want the "connection" item to get the alignment and overlap the parent sub-menu item for the "connection" effect, so we have another pad style with precise offsets for the sub-menus.

Following are the menu content and menu styles used in this example:

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

addLink("top-menu", "-", "", "", "x0"); // to use a top image for this item, set group-id to "x0"
addSubMenu("top-menu", "sub-menu 1", "", "", "sub-1", "x"); // items with group-id "x" will use top-menu regular background images
addSubMenu("top-menu", "sub-menu 2", "", "", "sub-2", "x");
addSubMenu("top-menu", "sub-menu 3", "", "", "sub-3", "x");
addLink("top-menu", "link 4", "", "", "x");
addLink("top-menu", "link 5", "", "", "x");
addLink("top-menu", "link 6", "", "", "x");
addLink("top-menu", "-", "", "", "x1"); // to use a bottom image for this item, set group-id to "x1"

addLink("sub-1", "-", "", "", "y0"); // to use a top image for items with group-id "y0"
addLink("sub-1", "link s1-1", "", "", "yy");
addLink("sub-1", "link s1-2", "", "", "y"); // items with group-id "y" will use regular sub-menu background images
addLink("sub-1", "link s1-3", "", "", "y");
addLink("sub-1", "link s1-4", "", "", "y");
addLink("sub-1", "-", "", "", "y1"); // to use a bottom image for items with group-id "y1"

addLink("sub-2", "-", "", "", "y0");
addLink("sub-2", "link s2-1", "", "", "yy"); // items with group-id "yy" are the "connection" items
addLink("sub-2", "link s2-2", "", "", "y");
addLink("sub-2", "link s2-3", "", "", "y");
addLink("sub-2", "link s2-4", "", "", "y");
addLink("sub-2", "link s2-5", "", "", "y");
addLink("sub-2", "link s2-6", "", "", "y");
addLink("sub-2", "-", "", "", "y1");

addLink("sub-3", "-", "", "", "y0");
addLink("sub-3", "link s3-1", "", "", "yy");
addLink("sub-3", "link s3-2", "", "", "y");
addLink("sub-3", "link s3-3", "", "", "y");
addSubMenu("sub-3", "sub-menu s3-4", "", "", "sub-31", "y");
addLink("sub-3", "link s3-5", "", "", "y");
addLink("sub-3", "-", "", "", "y1");

addLink("sub-31", "-", "", "", "y0");
addLink("sub-31", "link s3-4-1", "", "", "yy");
addLink("sub-31", "link s3-4-2", "", "", "y");
addLink("sub-31", "link s3-4-3", "", "", "y");
addLink("sub-31", "link s3-4-4", "", "", "y");
addLink("sub-31", "-", "", "", "y1");

endMenu();

addStylePad("pad", "visibility:hidden;"); // we don't need the base pad in this case
addStyleItem("item", "width:150; height:24; padding:4 0"); // 150 x 24 is the image dimension

addStylePad("subpad", "visibility:hidden; offset-left:-5; offset-top:-4"); // [-5, -4] to align the "connection" items
addStyleItem("subitem", "width:155; height:24; padding:4 0"); // sub-menu images are wider: 155 x 24

addStyleFont("font", "font-family:verdana; font-size:11; color:#000000 #ffffff; text-align:center");
addStyleTag("tag", "visibility:hidden");

addStyleItem("edgetop", "width:150; height:4"); // style for top and bottom items
addStyleItem("edgesub", "width:155; height:4");

addStyleMenu("menu", "pad", "item", "font", "tag", "");
addStyleMenu("submenu", "subpad", "subitem", "font", "tag", "");

addStyleMenu("edgex", "", "edgetop", "", "", ""); // item-level style
addStyleMenu("edgey", "", "edgesub", "", "", "");

addStyleGroup("group", "menu", "top-menu");
addStyleGroup("group", "submenu", "sub-1", "sub-2", "sub-3", "sub-31");

addStyleGroup("group", "edgex", "x0", "x1"); // link item-level style to top and bottom items
addStyleGroup("group", "edgey", "y0", "y1");

setBGImage("x", "./images/", "bg_off.gif", "bg_on.gif"); // background images for regular items on top-menu

setImage("x0", "./images/", "bg_top.gif", "bg_top.gif", 150, 4); // "./images" to specify the "images" sub-dir under the current path
setImage("x1", "./images/", "bg_bottom.gif", "bg_bottom.gif", 150, 4);

setBGImage("y", "./images/", "bg_off_sub.gif", "bg_on_sub.gif");
setBGImage("yy", "./images/", "bg_connect_off.gif", "bg_connect_on.gif"); // background images for the "connection" items

setImage("y0", "./images/", "bg_top_sub.gif", "bg_top_sub.gif", 155, 4);
setImage("y1", "./images/", "bg_bottom_sub.gif", "bg_bottom_sub.gif", 155, 4); // use image as item

# # #