使用方法:
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,"Ken_xu'Page","http://blog.csdn.net/xzknet"
,"_blank",null,"detrox.gif",false,"detrox's homepage on programming");建立了一个main的菜单项,又如
Item2 = new MenuItem(Item1,"Ken_xu'Page","http://blog.csdn.net/xzknet"
,"_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 为菜单背景层样式
想看源代码?点这里下载吧
http://download.csdn.net/source/726478
分享到:
相关推荐
给网络上找的资料,费尽一晚上的心机才整理好的。给这里发布一下,收5资源不贵吧?^v^
《网页开发手记HITML+CSS+JavaScript》中的菜单是二级的,增加了支持三级菜单功能,第三级的定位问题困扰我很久,最后通过设置上级li的position:relative实现。小修改就可以支持四级、五级...菜单。
JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!源码下载!
压缩包中有三个实现多级菜单的demo,分别用不同的方式实现的,感谢制作者,本人是转载
javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件
JavaScript读取XML节点生成多级菜单
javascript实现省市级联菜单的效果
里面包含了css中常用的布局 一个很实用的css+javascript的多级菜单
JavaScript 自定义多级联动下拉菜单
使用Java JSP JavaScript实现多级下拉菜单.pdf
* jQuery+ul 实现的跨浏览器菜单树 * 通过测试浏览器 ie6.0+,firefox3.5,safari3.2,opera10.0,Chrome4.0 * jquery版本:1.3.2 * * * * 用法: * // 构造菜单树对象 * var themenuTree = $("#thetree")....
javascript实现的网页三级联动的菜单,非常实用
JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级...
javascript实现网页上打字练习
javascript网页中实现仿flash菜单,不错的技巧
主要介绍了JavaScript实现向右伸出的多级网页菜单效果,通过javascript调用页面元素属性的动态改变实现向右展开菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript多级联动浮动菜单 第二版,包含仿京东商城商品分类菜单、仿window xp右键菜单、仿淘宝拼音索引菜单,上一个版本基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。...
纯原生Javascript实现的移动端多级选择器插件,可通过配置实现多级联动。压缩后JS文件只有3.96KB。
包含源代码,以及源代码解析。 JavaScript 多级联动浮动菜单
javascript实现多级静态树例子