• 首页
  • 小学语文
  • 中学语文
  • 中学英语
  • 免费论文
  • 教学随笔
  • 学生作文
  • 综合考试
  • 试题教案
  • 育儿话题
  • 教学资源
  • 编程技术
  • 博客
  • Javascript实现网页上的多级菜单

    日期:2003-01-12  地址:  作者:

    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中加入定位标签:<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 为菜单背景层样式

    源代码

    对 Javascript实现网页上的多级菜单 文章的评论    [查看网友评论]

    验证码:
    匿名发表: