跨框架菜单menuG5使用

1.介绍

目前很多网站使用了frame框架的结构，在顶端或左端放置菜单，可是一个非常头疼的问题就是二级菜单会被其他的frame遮挡住。查了很多的资料，都是说这个问题在frame中是无法解决得，也就是说frame没有设置可以修正这个问题。唯一的解决办法就是用JavaScript画动态层或动态定位已存在的子菜单层。在网上找到一款非常强大的菜单框架：menuG5，看了它的演示确实很牛，但是配置起来还着实费了番功夫，这里就把我目前学到的配置方法共享给大家，省的去看英文帮助了。

先贴几张实例图，大家可以看看符不符合自己的口味，不符就可以直接关掉不看了。

带普通样式的菜单

代码

addStylePad("pad", "item-offset:-1; offset-top:1;");
addStylePad("padSub", "item-offset:-1; offset-top:0; offset-left:1;");
addStyleItem("itemTop", "css:itemTopOff, itemTopOn;");
addStyleItem("itemSub", "css:itemSubOff, itemSubOn;");
addStyleFont("fontTop", "css:fontOff, fontOn;");
addStyleFont("fontSub", "css:fontSubOff, fontSubOn;");
addStyleTag("tag", "css:tagOff, tagOn;");
addStyleMenu("menu", "pad", "itemTop", "fontTop", "", "", "");
addStyleMenu("sub", "pad", "itemSub", "fontSub", "tag", "", "");
addStyleMenu("sub2", "padSub", "itemSub", "fontSub", "", "", "");
addStyleGroup("group", "menu", "menu-top");
addStyleGroup("group", "sub", "first", "third");
addStyleGroup("group", "sub2", "third-first");
addInstance("Demo", "Demo", "position:slot 6; menu-form:bar; align:left; valign:bottom; style:group;target:content;");

[/code]

这里的样式对应方式在menuG5的说明文档中有详细解释。

addStylePad用来给包裹菜单的box定义样式，item-offset设置菜单项之间的间距（若是水平菜单，则是横向间距；若是垂直菜单则是纵向

间距），offset-top设置垂直间距。

addStyleItem设置菜单的具体样式，css：指示具体样式表（也就是TB.css）中的样式名称。

addStyleFont设置菜单的字体。

addStyleTag设置菜单上用来表示拥有子菜单的小图片。

addStyleMenu将上面定义的菜单样式加入到指定的menuG5元素中，如menu代表整个自定义菜单，sub代表一级菜单，sub2代表二级菜

单等等。addStyleGroup将定义好的样式名称与自定义菜单中每一层菜单的名称对应起来，以便确定每级菜单使用的样式。

addInstance生成自定义菜单，并按照指定的位置样式显示。注意：这里的target：content指明了菜单超链接在名为content的frame中

打开页面。这一点很重要，否则就会在生成一级菜单的页面中打开超链接。

PS：跨框架菜单分割条的实现：

以example文件中的frameset-t6.html实例为例，需要注意三点：

1.在菜单构造js文件（content.js）中，增加分割条：

addSeparator("menu-sub", "");

2.在样式设置js文件(fst6-style.js)中，指定菜单所用分割条样式：

addStyleSeparator("sep", "css:separatorT, separatorB;");
addStyleMenu("sub", "pad", "itemSub", "fontSub", "tag", "", "sep");

3.在具有分割条菜单所在的frame页面(fst6-sub.html)中加入具体样式：

.separatorT { background-color:#906040; height:3px; margin-top:0px; }
.separatorB { background-color:#e0b090; height:3px; margin-bottom:0px;}

这样就可实现跨框架菜单中分割条的加入：

5)注意事项

由于子菜单是在其他框架中生成的，所以每次打开一个菜单超链接后，显示页面的框架中原来的子菜单的样式就被冲掉了，因此，必须在每一

个链接页面中都包含子菜单的样式表文件。

在项目中所有的menuG5的js文件都应该放在合适的位置并正确引用，有任何一个错误都有可能会造成菜单不显示，而不显示菜单并不会有任

何错误报出，所以在配置方面要仔细。

4.结尾

目前我对menuG5的研究就这些，祝大家能够顺利使用。