Example Three: Using Image Icons and Background Images

Well, a similar example of using background images. Credit goes to www.guistuff.com for the following original images:

I modified them to fit the menu settings:

	top-menu	sub-menu
top cap :
menu item :
connection item :
bottom cap :
image icon :
sub-menu tag :

And following are the menu item groups:

• top item on the top-menu.
  ... to use top-cap image for top-menu, define item-level style to set item width and height for the image.

• bottom item on the top-menu.
  ... to use bottom-cap image for top-menu, define item-level style to set item width and height for the image.

• sub-menu items on the top-menu.
  ... to use menu-item images for top-menu as background images, put on the image icon and sub-menu tag.

• other items on the top-menu.
  ... to use menu-item images for top-menu as background images.





• top item on a sub-menu.
  ... to use top-cap image for sub-menu, define item-level style to set item width and height for the image.

• bottom item on a sub-menu.
  ... to use bottom-cap image for sub-menu, define item-level style to set item width and height for the image.

• sub-menu items on a sub-menu.
  ... to use menu-item images for sub-menu as background images, put on the image icon and sub-menu tag.

• "connection" item on a sub-menu.
  ... to use connection-item images as background images.

• sub-menu & "connection" item on a sub-menu.
  ... to use connection-item images as background images, put on the image icon and sub-menu tag.

• other items on a sub-menu.
  ... to use menu-item images for sub-menu as background images.

The menu content:

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

addLink("top-menu", "-", "", "", "top-top"); // top-item
addSubMenu("top-menu", "sub-1", "", "", "sub-1", "top-sub");
addSubMenu("top-menu", "sub-2", "", "", "sub-2", "top-sub"); // sub-menu item on top-menu
addLink("top-menu", "link", "", "", "top-item");
addSubMenu("top-menu", "sub-3", "", "", "sub-3", "top-sub");
addLink("top-menu", "link", "", "", "top-item"); // normal menu-item on top-menu
addLink("top-menu", "link", "", "", "top-item");
addLink("top-menu", "-", "", "", "top-bottom"); // bottom-item

addLink("sub-1", "-", "", "", "sub-top"); // top-item on sub-menu
addLink("sub-1", "link", "", "", "sub-connect"); // connection-item on sub-menu
addLink("sub-1", "link", "", "", "sub-item");
addLink("sub-1", "link", "", "", "sub-item"); // normal menu-item on sub-menu
addLink("sub-1", "link", "", "", "sub-item");
addLink("sub-1", "-", "", "", "sub-bottom"); // bottom-item on sub-menu

addLink("sub-2", "-", "", "", "sub-top");
addLink("sub-2", "link", "", "", "sub-connect");
addLink("sub-2", "link", "", "", "sub-item");
addLink("sub-2", "link", "", "", "sub-item");
addLink("sub-2", "link", "", "", "sub-item");
addLink("sub-2", "link", "", "", "sub-item");
addLink("sub-2", "link", "", "", "sub-item");
addLink("sub-2", "-", "", "", "sub-bottom");

addLink("sub-3", "-", "", "", "sub-top");
addSubMenu("sub-3", "sub-3-1", "", "", "sub-31", "sub+connect"); // connection & sub-menu item on sub-menu
addLink("sub-3", "link", "", "", "sub-item");
addLink("sub-3", "link", "", "", "sub-item");
addSubMenu("sub-3", "sub-3-4", "", "", "sub-34", "sub-sub");
addLink("sub-3", "link", "", "", "sub-item");
addLink("sub-3", "-", "", "", "sub-bottom");

addLink("sub-31", "-", "", "", "sub-top");
addLink("sub-31", "link", "", "", "sub-connect");
addLink("sub-31", "link", "", "", "sub-item");
addLink("sub-31", "link", "", "", "sub-item");
addLink("sub-31", "link", "", "", "sub-item");
addLink("sub-31", "-", "", "", "sub-bottom");

addLink("sub-34", "-", "", "", "sub-top");
addLink("sub-34", "link", "", "", "sub-connect");
addLink("sub-34", "link", "", "", "sub-item");
addLink("sub-34", "link", "", "", "sub-item");
addLink("sub-34", "link", "", "", "sub-item");
addLink("sub-34", "-", "", "", "sub-bottom");

endMenu();

and the menu styles:

addStylePad("pad", "visibility:hidden;"); // base pad is not needed
addStyleItem("item", "width:120; height:18; padding:2 6"); // images for top-menu have size of 120 x 18

addStylePad("subpad", "visibility:hidden; offset-left:-2; offset-top:-20"); // [-2,-20] to align the connection item to top-menu
addStyleItem("subitem", "width:136; height:18; padding:2 14"); // images for sub-menu have size of 136 x 18

addStylePad("subpad2", "visibility:hidden; offset-left:-10; offset-top:-20"); // [-10,-20] to align the connection item to parent sub-menu

addStyleFont("font", "font-family:verdana; font-size:12; font-weight:bold; color:#ffffff #7e93aa; text-align:center");
addStyleTag("tag", "path:./images/; tag-normal:tag.gif; width:9; height:14;");

addStyleItem("edge-top", "width:120; height:20"); // item-level style for cap-images on top-menu
addStyleItem("edge-sub", "width:136; height:20"); // item-level style for cap-images on sub-menus

addStyleMenu("menu", "pad", "item", "font", "tag", "");
addStyleMenu("submenu", "subpad", "subitem", "font", "tag", "");
addStyleMenu("submenu2", "subpad2", "subitem", "font", "tag", "");
addStyleMenu("top-cap", "", "edge-top", "", "", "");
addStyleMenu("sub-cap", "", "edge-sub", "", "", "");

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

setImage("top-top", "./images/", "top.gif", "top.gif", 120, 20);
setImage("top-bottom", "./images/", "bottom.gif", "bottom.gif", 120, 20);
setBGImage("top-sub", "./images/", "normal_off.gif", "normal_on.gif");
setBGImage("top-item", "./images/", "normal_off.gif", "normal_on.gif");
setIcon("top-sub", "./images/", "icon.gif", "icon.gif", 9, 14, "left");

setImage("sub-top", "./images/", "top2.gif", "top2.gif", 136, 20);
setImage("sub-bottom", "./images/", "bottom2.gif", "bottom2.gif", 136, 20);
setBGImage("sub-sub", "./images/", "normal2_off.gif", "normal2_on.gif");
setBGImage("sub-connect", "./images/", "sub2_off.gif", "sub2_on.gif");
setBGImage("sub+connect", "./images/", "sub2_off.gif", "sub2_on.gif");
setBGImage("sub-item", "./images/", "normal2_off.gif", "normal2_on.gif");
setIcon("sub-sub", "./images/", "icon.gif", "icon.gif", 9, 14, "left");
setIcon("sub+connect", "./images/", "icon.gif", "icon.gif", 9, 14, "left");

# # #