Menu G5 Step-by-step: Cross-Frame menus

Usually we can notice two types of cross-frame menus:

html links in one frame to control menus in another frame.
top-menu in one frame and sub-menus in another frame.

The first setup gives you maximum freedom to render the links while you will have to add control codes to each link, and you are actually using individual menus as "sub-menus" to the links and thus logically you don't have one united piece of menu content. The second setup lets you use one menu content (the same menu content can be used for non-frame pages) and takes care of the menu splitting for you, but you might need to work on the style of the top-menu to embed it into the navigation frame page "naturally".

Menu G5 supports both of them. We will go through the second setup first since it's a built-in of Menu G5.

The simplest case for cross-frame menu would be two sibling frames under the same frameset, top-bottom or left-right, you just need to take the following steps to implement the menu:

define the menu content and CSS classes for menu style as usual (you can reuse those from a non-frame menu).
include the CSS definitions in the top-menu page and sub-menus pages.
set up the path script as usual.
in the frameset page, name the frame for sub-menus.
in the addInstance() call, position the menu close to the frame border (usually the pre-defined slots with proper alignment would make it an easy job) and set the link target to the sub-menu frame .
include the path script and loader script (menuG5LoaderFS.js or menuG5LoaderFSX.js) in the frameset page.
include the frame control script (menuG5F.js or menuG5FX.js) in the top-menu page.
set up the BODY onload call (initMenu & setSubFrame) for the top-menu page.

For example, the top-bottom frameset page:

<html>

<head>
<script language="javascript" src="...content-path.../path.js"></script>
<script language="javascript" src="...script-path.../menuG5LoaderFSX.js"></script>
</head>

<frameset rows="60, *" border="0" frameborder="0">
	<frame src="top.html" border="0" frameborder="0" scrolling="no"></frame>
	<frame src="main.html" name="main"></frame>
</frameset>

</html>

the top-menu frame page (top.html in this case):

<html>

<head>
<link rel=stylesheet href="...css-path.../menustyle.css" type="text/css">
<script language="javascript" src="...script-path.../menuG5FX.js"></script>
</head>

<body onload="initMenu('instance-name', 'top'); setSubFrame('instance-name', parent.main)">
...
</body>

</html>

Note: The initMenu("ins-name", "top") call tells that the page will show the top-menu of the menu instance. The setSubFrame("ins-name", frame-reference) call tells where to show the sub-menus of the menu instance.

and for pages in the sub-menu frame:

<html>

<head>
<link rel=stylesheet href="...css-path.../menustyle.css" type="text/css">
</head>

<body>
...
</body>

</html>

That's it.

The settings you need to pay attention to would be the menu layout and menu direction. Usually, if it's a top-bottom frameset, set the top-menu as menu bar, then use "right-down" for top-menu in top frame or "right-up" for top-menu in bottom frame. If it's a left-right frameset, set the top-menu as menu pad (or just ignore it to take the default), then use "right-down" for top-menu in left frame or "left-down" for top-menu in right frame.

The pre-defined slots are nine (9) spots along the window/frame border:

They can be used to position the menu close to the frame border. See the following table for menu instance alignment reference with slot positioning:

frameset layout	top-menu frame	menu placement	slot to use	alignment	sample
top-bottom	top	left	6	align:left; valign:bottom	[show]
		center	5	align:center; valign:bottom	[show]
		right	4	align:right; valign:bottom	[show]
	bottom	left	0	align:left; valign:top	[show]
		center	1	align:center; valign:top	[show]
		right	2	align:right; valign:top	[show]
left-right	left	top	2	align:right; valign:top	[show]
		middle	3	align:right; valign:middle	[show]
		bottom	4	align:right; valign:bottom	[show]
	right	top	0	align:left; valign:top	[show]
		middle	7	align:left; valign:middle	[show]
		bottom	6	align:left; valign:bottom	[show]

[Cross-Frame menus (cont.)] [Back to index page]

# # #