WEB开发网
开发学院网页设计JavaScript javascript实现网页上的多级菜单 阅读

javascript实现网页上的多级菜单

 2007-11-27 17:47:28 来源:WEB开发网   
核心提示:body { font-family: Georgia, Tahoma, 宋体; font-size: 10.8pt; background-image: url(bground.gif); scrollbar-face-color: #eeeeee; scrollbar-shadow-color: #9F

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,detroxs Page,http://detrox.yeah.net   ,_blank,null,detrox.gif,false,detroxs homepage    on programming);

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

   Item2 = new MenuItem(Item1,detroxs Page,http://detrox.yeah.net   ,_blank,null,detrox.gif,false,detroxs 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中加入定位标签:<a id = lnkDir href = template所在目录相对于根目录的位置></a>。例如:
template文件:normalPage.dwt存在于站点的templates目录,这需要在normalPage.dwt中加入。

<a id=lnkDir href=../.></a>

显示菜单:

最后使用,MainMenu的show()命令显示菜单。
例如:

main.show()

用户可以自定义菜单的显示方法。通过定义fShow(id)函数.函数原型如下

fShow(id) 

这里id时将要显示的菜单(div元素)的id号。可以通过这个id号控制菜单。定义mfShow(id)可以改变主菜单的显示方法

注释:

有子菜单的菜单项后的箭头图标文件名必须为arrow.gif文件,如果我提供的箭头颜色和您希望的不符请更改这个文件。

CSS样式的定义:

定义您自己的菜单样式,请修改menu.css,其中

  • .sMenuItem 为菜单项被选中时的样式
  • .nMenuItem 为菜单项未被选中时的菜单样式
  • .mnuTitle 为主菜单的标题样式
  • .nMenuBk 为菜单背景层样式

源代码:

<Script> var stl = null; var img = ; main = new MainMenu(180,100,Javascript MultiMenu); Item1 = new MenuItem(main,C/C++ Programming,javascript:alert(C/C++ Programming Language); ,_self,null,cpp.gif,false,Tips); Item11 = new MenuItem(Item1,Language Standard,javascript:alert(Standard); ,_self,null,a.gif,false,Tips); Item111 = new MenuItem(Item11,Type,javascript:alert(Type); ,_self,null,a.gif,false,Tips); Item1111 = new MenuItem(Item111,int,javascript:alert(int); ,_self,null,b.gif,false,Tips); Item11111 = new MenuItem(Item1111,unsigned,javascript:alert(unsigned); ,_self,null,c.gif,false,Tips); Item11112 = new MenuItem(Item1111,signed,javascript:alert(signed); ,_self,null,d.gif,false,Tips); Item1112 = new MenuItem(Item111,long,javascript:alert(long); ,_self,null,e.gif,false,Tips); Item112 = new MenuItem(Item11,Class,javascript:alert(Class); ,_self,null,f.gif,false,Tips); new MenuItem(Item11,-,javascript:alert(function); ,_self,null,g.gif,false,Tips); Item113 = new MenuItem(Item11,function,javascript:alert(function); ,_self,null,h.gif,false,Tips); Item12 = new MenuItem(Item1,STL Library,javascript:alert(STL); ,_self,null,jav.gif,false,Tips); Item13 = new MenuItem(Item1,Boost Library,javascript:alert(Boost); ,_self,null,h.gif,false,Tips); Item131 = new MenuItem(Item13,lexcial_cast,javascript:alert(Lexical_cast); ,_self,null,jav.gif,false,Tips); Item1311 = new MenuItem(Item131,movment,javascript:alert(movment); ,_self,null,a.gif,false,Tips); Item1312 = new MenuItem(Item131,usage,javascript:alert(usage); ,_self,null,b.gif,false,Tips); Item1313 = new MenuItem(Item131,source,javascript:alert(source code); ,_self,null,c.gif,false,Tips); Item13131 = new MenuItem(Item1313,download here,javascript:alert(here); ,_self,null,cpp.gif,false,Tips); Item13132 = new MenuItem(Item1313,download there,javascript:alert(there); ,_self,null,d.gif,false,Tips); Item132 = [1] [2] 下一页

Tags:avascript 实现 网页

编辑录入:coldstar [复制链接] [打 印]
赞助商链接