JavaScript一点也不简单—实现“跨Frame的层模拟菜单”的方法（译文）

//文章译者：心晴（欢迎转载，希望转载前通知一声：brothercat@126.com）

//文章来源：http://www.yxscripts.com/menuG4/examples/example2.html

实现效果：用层模拟的菜单跨越Frame（翻译成框架可能不标准，所以还是用Frame）显示出来。

基本思想：Frame、层、样式、JS来实现效果。

译文如下：

“跨Frame的层模拟菜单”最简单的一种情况应该是同一个Frameset下有兄弟两个frame，例如：top-bottom型或left-right型的，你只需照以下步骤来实现这种菜单效果：

1.在Frameset页里，为了实现层菜单效果我们需要给兄弟两个frame命名。

2.像平时设计（JS）菜单一样，我们首先需要设计出菜单的内容和样式（以下默认菜单都架设在top-frame里）。

3.将设计好的菜单放在靠近frame边沿的地方（一般来说：我们事先准备好菜单样式将为你省事不少）。

4.将菜单的链接设置为连接到bottom-frame里。

5.像平常一样写好path.js的代码。

6.在Frameset页里嵌入两个JS文件：路径脚本path.js和传递脚本menuG4Loaderfs.js

7.在top-frame页里嵌入控制frame的脚本menuG4f.js

8.在top-frame页HTML代码的<body>里添加onload事件，如：οnlοad="initMenu('instance-name', 'top'); setSubFrame('instance-name', parent.main)"

例如，以下是top-bottom型Frameset页面里的代码：

接着是top-frame页的代码如下：（我们将其命名为top.html）

以上就是我们实现“跨Frame的层模拟菜单”的步骤，如果还有疑问可以到FAQ去查找更多细节。

值得一提的是：在设计过程中你需要注意菜单的形式和子菜单弹出的方向。一般来讲，如果是top-bottom型的框架，我们会将菜单放在top-frame页面里（即top.html），设置子菜单的弹出形式为right-down（先向下弹出再向右展开），要是将菜单放在bottom-frame里（即bottom.html），我们则会设置子菜单成right-up（先向上弹出再向右展开，就是windows里的“开始”菜单类型）；如果是left-right型的框架，我们会先在框架上面垫起一个菜单（这儿翻译的可能不准确，原文是：If it's a left-right layout, set the top-menu as menu pad (or just ignore to take the default)），然后在left-frame页里将子菜单弹出形式做成right-down或者在right-frame页里将其做成left-down的样式。

同样，如果你想使用事先写好的菜单样式，可以参见以下我们为你提供的各种对齐方式的菜单：

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

这些提供的菜单样式分别分部在window/frame的不同边沿位置：

0	1	2	3	4	5	6	7	8

接下来，我们看看其它更复杂形式的frameset页面里如何设置模拟菜单的，如下top&left-right型frameset页的代码：

<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>
在这个top&left-right型的frameset页里，我们分别在top-frame（即top.html）和left-frame（即left.html）里放
上菜单，它们都会在right-frame页里显示弹出的子菜单。

至于应该怎么放，我们只需将要放置在top-frame里的菜单照上面讲过的“top-bottom型的放置方法”放置，而
left-frame里的菜单照“left-right型的放置方法”放置就可以了。

有一点要注意的是，在这种top&left-right型框架里的top-frame和right-frame里同时放置菜单，我们假定放置在
top-frame页里的菜单是放置在最左边的，而事实是，top-frame下面的right-frame距离最左边的边框还有200象
素的宽度（这段宽度里其实就是left-frame的宽）。

要解决这个问题，我们需要设置第一级子菜单所在垫层左偏移量为-200。在菜单样式中我们这样写：

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", ...);

未完待续...