Menu G4 Examples

Example Two: Cross-Frame Menus

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:

in the frameset page, name the frame for sub-menus.
define the menu content and menu styles as usual (aka, as that for a non-frame menu).
position the menu close to the frame border (usually the pre-defined slots would make it an easy job).
set the link target to the sub-menu frame.
set up the path script as usual.
include the path script and loader script (menuG4Loaderfs.js) in the frameset page.
include the frame control script (menuG4f.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="path.js"></script>
<script language="javascript" src="..script-path../menuG4Loaderfs.js"></script>
</head>

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

</html>

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

<html>

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

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

</html>

That's it. You can refer to the FAQ page for more details.

The settings you need to pay attention to would be the menu form and menu direction. Usually, if it's a top-bottom layout, 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 layout, set the top-menu as menu pad (or just ignore to take the default), then use "right-down" for top-menu in left frame or "left-down" for top-menu in right frame.

Also, if you use a pre-defined slot, see the following table for menu instance alignment reference:

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

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

0	1	2	3	4	5	6	7	8

Now let's take a look at other frameset layouts.

We have the following frameset page for example:

<frameset rows="60, *" border="0" frameborder="0">
	<frame src="top.html" border="0" frameborder="0" scroll="no"></frame>
	<frameset cols="200, *" border="0" frameborder="0">
		<frame src="left.html" border="0" frameborder="0" scroll="no"></frame>
		<frame src="right.html" name="main"></frame>
	</frameset>
</frameset>

and two menus: one with top-menu in top frame and the other with top-menu in left frame. Both menus will show sub-menus in the right frame.

For such a "top & left-right" layout, it's really just to set up the top-frame page as what we will do for a top-bottom frameset, and set up left-frame page as usual for a left-right frameset.

One thing though, for a normal top-bottom frameset, it's assumed that the top frame and bottom frame are aligned on the left border. Now for the top & right frames, the right frame is actually 200 pixels away from the top frame's left border.

To workaround it, we will set the pad offset-left to -200 for the first-level sub-menus. In menu styles, it would be like:

addPadStyle("top-pad", "...");
addPadStyle("first-subpad", "offset-left:-200; ...");
addPadStyle("other-subpad", "...");

addStyleMenu("topmenu", "top-pad", ...):
addStyleMenu("first-submenu", "first-subpad", ...);
addStyleMenu("other-submenu", "other-subpad", ...);

addStyleGroup("top-right", "topmenu", "top-menu-name");
addStyleGroup("top-right", "first-submenu", "first-submenu-name", ...);
addStyleGroup("top-right", "other-submenu", "other-submenu-name", ...);

Since the top-menu's offsets are actually offsets for menu instance, which are defined in the addInstance() call, and the offsets in a pad style would only apply to sub-menus, you can simply the menu styles if your top-menu and non-first-level submenus would have the same style:

addPadStyle("top-other-pad", "...");
addPadStyle("first-subpad", "offset-left:-200; ...");

addStyleMenu("top-other-menu", "top-other-pad", ...):
addStyleMenu("first-submenu", "first-subpad", ...);

addStyleGroup("top-right", "top-other-menu", "top-menu-name", "other-submenu-name", ...);
addStyleGroup("top-right", "first-submenu", "first-submenu-name", ...);

See this link for an example.

Similar workarounds would work for other "2-in-1" frameset layouts, such as setting the offset-left for the bottom frame page in a "left-right & bottom" layout, or offset-top for the left frame page in a "left & top-bottom" layout.

One common thing among the above examples is that they all have a consistent frame for sub-menus, which is in the same frameset page for the top-menu frame. For these cases, the "setSubFrame()" in the top-menu page is good enough to tell where the sub-menu frame is. However, sometimes we might have dynamic contents, or the sub-menu frame is not in the same frameset page for the top-menu frame. For such cases, we will have the sub-menu page itself tell where the sub-menu frame is.

Supposed we have the following frameset page:

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

and the sub-menus would be shown in the bottom frame.

But, may be at some point, the bottom frame will load another frameset page:

<frameset cols="480, *" border="0" frameborder="0">
	<frame src="left.html" name="main" border="0" frameborder="0" scroll="no"></frame>
	<frame src="right.html"></frame>
</frameset>

and we would want the sub-menus shown in the bottom-left frame.

When we get back to the "original" top-bottom layout, we still want to put the sub-menus in the bottom frame.

So we are switching between two frames for the sub-menus, and thus the "setSubFrame()" won't work since it's kind of "fixed".

To tell the correct frame for sub-menus, we will need to set up sub-menu pages that switch the sub-menu frame like this:

<html>

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

<body onload="initSub('instance-name')">
...
</body>

</html>

and we only need to set up the "initMenu()" call in the top-menu page:

<html>

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

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

</html>

See this link for an example.

# # #