Javascript实现网页上的多级菜单(竖着)

简介: 使用方法:1,包含menu.js和menu.css 2,用创建主菜单类   main = new MainMenu(10,50,"My Menu");这里,MainMenu的前两个参数表示其左上角位置坐标,前者为left,后者为top。第三个参数为菜单标题。之后用MenuItem类建立菜单项MenuItem的源型如下:   function MenuItem(_parent,_caption

使用方法:
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

 

相关文章
|
1月前
|
数据采集 Web App开发 JavaScript
JavaScript爬虫进阶攻略:从网页采集到数据可视化
JavaScript爬虫进阶攻略:从网页采集到数据可视化
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
3月前
|
JavaScript 前端开发 Python
分享77个JS菜单导航,总有一款适合您
分享77个JS菜单导航,总有一款适合您
18 0
|
3月前
|
JavaScript iOS开发 Python
分享114个JS菜单导航,总有一款适合您
分享114个JS菜单导航,总有一款适合您
30 0
|
3月前
|
移动开发 JavaScript 前端开发
分享113个JS菜单导航,总有一款适合您
分享113个JS菜单导航,总有一款适合您
42 0
|
3月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
40 6
|
3月前
|
JavaScript 前端开发 算法
JavaScript实现网页关灯效果
JavaScript实现网页关灯效果
25 0
|
3月前
|
移动开发 JavaScript 前端开发
分享111个JS菜单导航,总有一款适合您
分享111个JS菜单导航,总有一款适合您
60 0
|
4月前
|
前端开发 JavaScript
前端js代码一句话模拟Ctrl+A全选网页内容效果document.execCommand(‘selectAll‘);
前端js代码一句话模拟Ctrl+A全选网页内容效果document.execCommand(‘selectAll‘);
|
1月前
|
数据采集 JSON JavaScript
如何处理动态网页(例如使用 JavaScript 生成的内容)?
如何处理动态网页(例如使用 JavaScript 生成的内容)?
14 0