当前页面: 开发资料首页 → Javascript 专题 → Javascript实现网页上的多级菜单

Javascript实现网页上的多级菜单

摘要: Javascript,菜单,多级菜单

Javascript多级菜单v0.9b

作者：detrox
email: detrox@163.net
qq: 2721826

请看左侧的例子：

0.9版特性：

1,可以多级菜单显示

2，可通过定义fShow函数定义菜单的出现方式

3，解决了和dreamweaver的template机制配合时，相对路径在脚本中无法定位的问题

4，可在菜单项上加入图标，支持分割线

5，在有子菜单的菜单项上，显示“〉”标明其是多级菜单

使用方法：
1,包含menu.js和menu.css

2,用创建主菜单类

   main = new MainMenu(10,50,"My Menu");

这里，MainMenu的前两个参数表示其左上角位置坐标，前者为left,后者为top。第三个参数为菜单标题。

之后用MenuItem类建立菜单项
MenuItem的源型如下：

   function MenuItem(_parent,_caption, _url, _target,_style, _image,_templatePos,_description)

其中，_parent为父菜单项，例如：

Item1 = new MenuItem(main,"detrox's Page","http://detrox.yeah.net"

   ,"_blank",null,"detrox.gif",false,"detrox's homepage    on programming");

建立了一个main的菜单项，又如

   Item2 = new MenuItem(Item1,"detrox's Page","http://detrox.yeah.net"

   ,"_blank",null,"detrox.gif",false,"detrox's homepage    on programming");

建立一个Item1的子菜单项

其他参数：

• _caption为菜单项的标题，new当_caption为“-”时可显示分割线。
• url为其连接目的地
• _target为文档读取的位置(同a标签的target属性)
• _style可以添加菜单项的特殊CSS属性
• _image为显示在菜单文字前小图标的路径
• _description为菜单注释(同a标签的title属性)。

特别说明：

_templatePos 用于和Dreamweaver结合制作网页时。当需要使用template机制，而_url又需要在网页中相对定位时。设置_templatePos为true并且需要在dreamweaver的template中加入定位标签：。例如：
template文件：normalPage.dwt存在于站点的templates目录，这需要在normalPage.dwt中加入。

fShow(id)