Menu G5 Examples: Showing the page path

When a visitor is going through the top-menu and sub-menus and finally click on a menu item to load a page, it would be nice that your menu highlights that path for the current page.

To do so, Menu G5 adds support of the additional CSS style for the highlighting effect, and introduces two new user functions: showPagePath() and resetPagePath().

As you might still remember, a menu item (except for info item and separator item) has four parts:

item ... item size, background color or image, and text alignment.
text ... font color, style and size.
icon ... icon images.
tag ... sub-menu tag images for sub-menu items.

each of these parts supports four CSS styles:

normal ... when menu item first shows up or is moused-out.
highlighted ... when menu item is moused-over.
mouse-down ... when menu item is moused-down.
sub-menu ... when a sub-menu item is moused-out and its sub-menu gets mouse focus.

Now we are adding in the fifth CSS style for all four item parts:

on-path ... when the page path is called to show and the menu item is on the path.

and when you define the style, say addStyleItem(), you can have:

addStyleItem("item-style-name", "css:normal-css, highlighted-css, mousedown-css, submenu-css, onpath-css; ...");

Usually you won't need all five styles and you can leave those unwanted empty. For example, if you only need the normal-css, highlighted-css and onpath-css like we do in this example, you can have:

addStyleItem("item-style-name", "css:normal-css, highlighted-css, , , onpath-css; ...");

Okay, we have the style set, and what we will do next is to put the showPagePath() call as part of the onload event handler:

<body onload="showMenu('instance-name'); showPagePath('instance-name', 'group-id', 'group-id', ...)">

When the showPagePath() is called, it will first look for the menu instance by the given 'instance-name', then look for menu item with the first 'group-id' from the top-menu of the menu instance, if found and the menu item with that 'group-id' is a sub-menu item, it will then look for the second 'group-id' from that sub-menu, and so on so forth until it gets to the last 'group-id' given, or it arrives on a link item or command item (so that it can not go deeper), or it can't match a 'group-id'.

Note: Obviously in the menu content you will need to assign unique group ids to the menu items.

The showPagePath() function can be called any time from anywhere, but usually the onload event handler is a good candidate. If the showPagePath() is called when some of the sub-menus down the path are not built yet (remember that Menu G5 only builds a sub-menu when it first shows up?), Menu G5 will remember the path, and when a sub-menu with item on path shows up, it renders that item with the on-path style.

To remove the on-path effect is easy, if you ever need to do so, just call resetPagePath('instance-name') and all the items on the current path will be reset to the their normal styles.

The setup in cross-frame menus is similar, and you can put the showPagePath() call in the sub-menu frame page (assuming that the control frameset is the immediate parent frameset):

<body onload="parent.showPagePath('instance-name', 'group-id', 'group-id', ...)">

To see how it works, just click through the menu (yes, you can click on a sub-menu item) on the upper part of the page to load some other pages. The "Home" item will bring you back to this page.

[Back to index page]

# # #