Menu G5 Examples: Menu swapping
There could be situations that you don't want a large menu, instead, you want to split the large menu into some small menus and display one of them according to what page is loaded.
This would not be a problem for non-frame pages since you can rebuild the menu every time when a page is loaded, but for cross-frame pages, you might not want to load a new frameset page every time just to refresh the top-menu frame for a new menu.
To workaround it, we can take advantage of two user functions: showMenuX() and hideMenuX().
The showMenuX("instance-name") call is similar to showMenu(), except that it also sets the menu instance to be visible afterwards as if it's built with "visibility:visible" in the addInstance() call.
Likewise, the hideMenuX("instance-name") call is similar to hideMenu(), but it sets the menu instance to be invisible afterwards as if it's built with "visibility:hidden" in the addInstance() call.
So, the idea is to build all the small menus on-swapping with "visibility:hidden" first, then when a content frame page loads, it calls showMenuX() to swap on its menu and calls hideMenuX() to swap off the previous menu if there is one.
See this [link] for an example, and you can click on a vehicle maker to swap the menu.
Update for IE/Mac: To have this example work with IE/Mac, a small delay (200ms) is set before displaying a menu.
# # #