Menu G5 Step-by-step: Cross-Frame menus (cont.)

yxScripts.com

If you prefer to set up links in one frame and open menus in another frame, you can take use of the following user functions:


Let's say, in a top-bottom frameset layout, we have the following links in the top frame:

Home  |  Tool Scripts  |  Game Scripts  |  User Forum  |  Contact

and we need to fly out some sub-menus under "Tool Scripts", "Game Scripts" and "User Forum".


Defining the menu contents is not a problem, just three menu instances acting as "sub-menus" to the links in top frame. What we need to figure out is how to position these three menus in the bottom frame and how to trigger them.

We can set up some place holders close to the top border in the bottom frame for the "sub-menus", or we can just simply use slot 1 (the top-center spot) with some offsets for the "sub-menus". But actually, to be more precisely, we can set up place holders in the top frame and use them to position the "sub-menus".

Similar to the menu bar in the example of [When Javascript is disabled], we will use the separator TD cell to set up the place holders:

... Home ...
<td id="Tool"><font color="#ffffff">&nbsp;|&nbsp;</font></td>
... Tool Scripts ...
<td id="Game"><font color="#ffffff">&nbsp;|&nbsp;</font></td>
... Game Scripts ...
<td id="Forum"><font color="#ffffff">&nbsp;|&nbsp;</font></td>
... User Forum ...
... | ...
... Contact ...

and we set up the "openMenu()" for the link:

<a ... onmouseover="openMenu('Tool');"> Tool Scripts </a>

and we have the menu instance for the "Tool Scripts" link like this:

addInstance("Tool", "Tool", "floating:yes; visibility:hidden;");

You might have noticed that this menu instance is by default positioned at [0,0], what we need to do next is to apply the x-coordinate of the place holder to this menu instance.

To get the coordinates of a place holder, we have:

getLeft("place-holder-id");
getTop("place-holder-id");

To adjust the position of a menu instance, we have:

setHolder("ins-name",id)
setCoordinates("ins-name",x,y)

For this "Tool Scripts" link, we want its "sub-menu" to be close to the top border of the bottom frame (y-coordinate equals to zero) and horizontally aligned with the place holder (x-coordinate equals to the x-coordinate of the place holder). To do so, we adjust the "onmouseover=" handler:

<a ... onmouseover="setCoordinates('Tool',getLeft('Tool'),0); openMenu('Tool');"> Tool Scripts </a>

Thus we've used the place holder in the top frame to position the menu in the bottom frame. Likewise, we can set up the "onmouseover" for other links:

<a ... onmouseover="setCoordinates('Game',getLeft('Game'),0); openMenu('Game');"> Game Scripts </a>
<a ... onmouseover="setCoordinates('Forum',getLeft('Forum'),0); openMenu('Forum');"> User Forum </a>

As to the links of "Home" and "Contact", they don't have "sub-menus", and should close any opened menu when hovered:

<a href="home-url" target="main" onmouseover="closeMenu();"> Home </a>
...
<a href="contact-url" target="main" onmouseover="closeMenu();"> Contact </a>

For the bottom frame page, since the whole menu instance is shown in the frame as a "sub-menu" to the top frame link, we would use initMenu("ins-name", "all") for that purpose and we have two options here:

  1. to call it from the first or default bottom frame page:
<body onload="initMenu('Tool','all'); initMenu('Game','all'); initMenu('Forum','all')">

The initMenu("ins-name", "all") call tells the script not to split the menu but show it all in the same frame page from where it's called, and it sends the frame reference to the control frameset.

  1. to call it from the top frame page:
<body onload="initMenu('Tool', 'all', parent.main); initMenu('Game', 'all', parent.main); initMenu('Forum', 'all', parent.main)">

With the additional parameter, parent.main, which is the bottom frame, it sets the target frame for menu instead of where it's called.

Click [here] to see the example. Click [here] to see a left-right frameset example.

[Back to index page]

# # #