javascript(js),XML,DOM实现无限级下拉菜单，不会被任何标签或元素遮住

最新推荐文章于 2026-06-23 13:52:18 发布

原创最新推荐文章于 2026-06-23 13:52:18 发布 · 2.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #xml #object #menu #框架

web开发专栏收录该内容

2 篇文章

订阅专栏

该博客介绍菜单实现技术，主要运用Javascript、DOM和XML。菜单不会被SELECT、OBJECT等标签覆盖，可跨过框架悬浮显示。通过指定父子菜单ID实现动态菜单，用XML存储菜单数据作静态菜单，使用window.createPopup显示，仅支持IE。还给出代码示例及下载地址。

菜单的主要特性：

菜单实现的主要技术为Javascript, DOM, XML
不会被任何标签覆盖，一般的菜单会被SELECT,OBJECT等标签覆盖。
可以跨过框架，譬如一个frameset中有两个frame，上一个frame放菜单，下一个frame放具体内容，那么菜单可以悬浮于下一个frame之上。
在添加菜单数据时，通过指定父子菜单的ID来达到动态菜单的目的。
可使用XML存储菜单数据，一般用作静态菜单。
使用window.createPopup显示菜单，所以只能在IE中使用。

一段代码示例：

<script language="javascript" type="text/javascript">

//构造函数的两个参数意义资源文件（如图标等）所在目录、样式文件

var menu = new PopupMenu("","popupmenu-style.xml");

menu.add(100,-1,"论坛","#","_blank","");

menu.add(105,100,"论坛1","http://10.81.32.1/forums","_blank","txt.gif");

menu.add(10505,105,"论坛11","http://10.81.32.1/forums","_blank","");

menu.add(1050505,10505,"论坛111","http://10.81.32.1/forums","_blank","");

menu.add(105050505,1050505,"论坛111呵呵合伙呵呵呵呵和呵呵呵呵哈hehe","http://10.81.32.1/forums","_blank","");

menu.add(105050510,1050505,"啊啊阿","/test.jsp","_blank","");

menu.add(1050510,10505,"论坛112","/tiannet/test.jsp","_blank","");

menu.write();

</script>

代码下载地址： http://pickup.mofile.com/1779422407813382

菜单效果图：