Menu G5 Step-by-step: Cross-Frame menus (cont.)
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" scrolling="no"></frame> <frameset cols="150, *" border="0" frameborder="0"> <frame src="left.html" border="0" frameborder="0" scrolling="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 150 pixels away from the top frame's left border.
To workaround it, we will set the pad offset-left to -150 for the first-level sub-menus. In menu styles, it would be like:
addPadStyle("top-pad", "...");
addPadStyle("first-subpad", "offset-left:-150; ...");
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-level-submenu-name", ...);
addStyleGroup("top-right", "other-submenu", "lower-level-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.
By introducing the "base:right;" phrase (and "vbase:bottom;") in Version 5.6.0, we no longer need to worry about the offset of the first level sub-menus when we have a bottom-left frame. Just set up the menus like we usually do for a regular top-bottom case and add the "base:right;" phrase in the addInstance() call, the sub-menus will align against the right frame border (the fixed border).
See this [link] for an example.
One common thing among the above example and other cross-frame 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" scrolling="no"></frame> <frame src="bottom.html" name="main"></frame> </frameset>
and the sub-menus would be shown in the bottom frame ("main").
But, may be at some point, the bottom frame will load another frameset page:
<frameset cols="600, *" border="0" frameborder="0"> <frame src="left.html" name="content" border="0" frameborder="0"></frame> <frame src="right.html"></frame> </frameset>
and we would want the sub-menus shown in the bottom-left frame ("content").
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../menuG5FX.js"></script>
</head>
<body onload="initSub('instance-name')">
...
</body>
</html>
when such a frame page is loaded, the script will update the sub-menu frame reference for the specified menu instance, and we only need to set up the "initMenu()" call in the top-menu page:
<html>
<head>
...
<script language="javascript" src="..script-path../menuG5FX.js"></script>
</head>
<body onload="initMenu('instance-name', 'top')">
...
</body>
</html>
See this [link] for an example.
[Cross-Frame menus (cont.)] [Back to index page]
# # #