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

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

 

时间: 2024-08-31 21:50:04

Javascript实现网页上的多级菜单(竖着)的相关文章

javascript 设置网页上一些标签的值

问题描述 我需要用javascript设置网页上标签的值代码如下一个单选控件[code=XM]<INPUTtype="radio"id=radio4name="strKind"value="(原创)"onclick="ChangeSubmitButtonState();">原创<INPUTtype="radio"id=radio2name="strKind"value=

JavaScript 在网页上单击鼠标的地方显示层及关闭层_javascript技巧

在网页上单击鼠标的地方显示层,供用户选择地点,同时把用户选择的地点显示在文本框中.主要是控制层的显示.隐藏. 复制代码 代码如下: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>层的隐藏显示练习</TITLE> <STYLE type="text/css&qu

用ASP和JavaScript实现网页上的动态分级目录

一.动态分级目录及其特点 所谓分级目录,其实大家并不陌生,熟悉Windows操作系统的人,一定对Windows下文件系统的资源管理器有印象,分级目录的显示(如下图所示)就象资源管理器一样是一个树形结构.  通过点击"文件夹"图标,你就可以看到这个类别下的子类别,如此递归直到最末梢的结点.这种分级目录在许多网络应用中都很重要,它主要有以下优点: 1.直观性强:即使一个不了解计算机,不经常上网的人通过这种分级目录显示也不会在超文本的海洋中迷失方向,而能够方便地找到自己要去的地方.2.便于管

JavaScript总结-网页上显示时间

网页上显示时间 代码如下: <TABLE> <TR> <TD><span id="localtime"></span> <script> function showLocale(objD) { var dn, str; var hh = objD.getHours(); var mm = objD.getMinutes(); var ss = objD.getSeconds(); str = (objD.getMo

用JavaScript实现网页上的浮动广告

 漫游于网络之间,你会发觉,因特网不但是信息的海洋,也是广告的海洋.除了普通的Gif Banner.Flash外,浮动广告也是时下网上较为流行的广告形式之一.当你拖动浏览器的滚动条时,这种在页面上浮动的广告,可以跟随屏幕一起移动.尽管这种效果对于广告展示有相当的实用价值,但对浏览你网页的人来讲,这则是个既妨碍阅读,又影响阅读兴趣的东西,因此一定不能滥用.不过,如果你能善用的话,它就能发挥出极大的作用.   要做出浮动式广告的效果并不困难,如果你有JS基础的可以自己写一个,如果连写都懒得写的话,到

JavaScript实现网页上的浮动广告的简单方法_javascript技巧

漫游于网络之间,你会发觉,因特网不但是信息的海洋,也是广告的海洋.除了普通的Gif Banner.Flash外,浮动广告也是时下网上较为流行的广告形式之一.当你拖动浏览器的滚动条时,这种在页面上浮动的广告,可以跟随屏幕一起移动.尽管这种效果对于广告展示有相当的实用价值,但对浏览你网页的人来讲,这则是个既妨碍阅读,又影响阅读兴趣的东西,因此一定不能滥用.不过,如果你能善用的话,它就能发挥出极大的作用. 要做出浮动式广告的效果并不困难,如果你有JS基础的可以自己写一个,如果连写都懒得写的话,到网上下

JavaScript实现横向滑出的多级菜单效果_javascript技巧

本文实例讲述了JavaScript实现横向滑出的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JavaScript横向滑出的多级菜单,只用鼠标放上就可以动画出现二级菜单,整体设计精美,大气,博客上也可以用哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hx-show-menu-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

 这篇文章主要介绍了利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域.需要的朋友可以过来参考下,希望对大家有所帮助 原理就是循环获取网页上的控件,然后设置disabled 属性为true.   代码如下:   代码如下: <script type="text/javascript">     var nodeList = document.getElementsByTagName("input");     for (var i =

javascript中如何实现浏览器上的右键菜单

javascript|菜单|浏览器 如何实现浏览器上的右键菜单 最近在程序员大本营中的讨论中有一位老兄提出如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果.唯鱼试了试,发现不是很难解决.现在就将源码和原理说出来和大家共享一下.哈,其实效果不是很完美啦,如果哪位大侠有更好的解决方法.可以给唯鱼yyu@enet.com.cn来信罗. 首先要解决的问题是在怎样的情况鼠标右击不会出现IE的菜单.思路可以有两个,一个是将焦点移开,还有一个就是点在网页的什么地方不会出现右键菜单,而且会响应鼠标