JavaScript + CSS 实现动态菜单显示

时间：2007-02-17 来源：PHP爱好者

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>更易使用</TITLE>
<SCRIPT language="javascript">

var whichIm;
var varColor = "DDEEFF";

document.onmouseover = mouseOver;
document.onmouseout = mouseOut;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

function mouseOver() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent")/*判断对象是否为“单位”*/ {
fColor = vSrc.style.backgroundColor;
vSrc.style.backgroundColor = varColor;
/*注2*/
}
}

function mouseOut() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent") {
vSrc.style.backgroundColor = fColor;
/*注2*/
}
}

function mouseUp() {
var vSrc = window.event.srcElement;
if (vSrc.className == "child2" || vSrc.className == "child3" || vSrc.className == "parent") {
/*注2*/
}
}
//

*************************************************************************************
* *
*处理文件-------------------------------------------------------------CLASS="parent"*
* 跟踪文档-------------------------------CLASS="child2"--| *
* 网上邻居--CLASS="child3"--| | *
* 我的文档--CLASS="child3" | | *
* 文件....--CLASS="child3" |-CLASS="child4" | *
* 历史....--CLASS="child3"__| |-CLASS="child1" *
* 关联文件类型---------------------------CLASS="child2" | *
* 处理图像-------------------------------CLASS="child2" | *
* 管理打印-------------------------------CLASS="child2"__| *
*查找信息-------------------------------------------------------------CLASS="parent"*
* 索引内容-------------------------------CLASS="child2"--| *
* 集成搜索-------------------------------CLASS="child2" |-CLASS="child1" *
* Active Directory-----------------------CLASS="child2"__| *
*个人化---------------------------------------------------------------CLASS="parent"*
* 开始菜单-------------------------------CLASS="child2"--| *
* 工具栏---------------------------------CLASS="child2" | *
* 活动桌面-------------------------------CLASS="child2" |-CLASS="child1" *
* 辅助向导-------------------------------CLASS="child2" | *
* 多语言技术-----------------------------CLASS="child2"__| *
*在 Web 上工作--------------------------------------------------------CLASS="parent"*
* Internet 连接向导----------------------CLASS="child2"--| *
* 个人收藏夹窗格-------------------------CLASS="child2"__|-CLASS="child1" *
*远程工作-------------------------------------------------------------CLASS="parent"*
* 脱机工作-------------------------------CLASS="child2"--| *
* 脱机文件--CLASS="child3"--| | *
* 脱机浏览--CLASS="child3" |-CLASS="child4" | *
* Web ....--CLASS="child3"__| | *
* 网络和拨号连接文件夹-------------------CLASS="child2" |-CLASS="child1" *
* 加密文件系统---------------------------CLASS="child2" | *
* 电源管理-------------------------------CLASS="child2" | *
* 自动红外支持---------------------------CLASS="child2"__| *
* *
*************************************************************************************

上图中，每个 Class 定义了一个层，在 JavaScript 及 CSS 中，对层进行操作。每个层的 Class 名称标志了他们在菜单中的相对位置。
定义：child2、child3 和 parent 各自标志了一个层，我们称它为“单位”（其实我也不知道准确的名称应该是什么，姑且先这么叫吧:-)），而 child1 和 child4 则标志了处于同一相对位置的几个子层所组成的父层，我们称它为“集合”。
注1：原(M$)文件中引用了../Javax.htm 及 ../NAVSTYLE.CSS 两个文件，为叙述方便，上述两个文件中与本文有关的代码被直接添加到本文中。
注2：原(M$)代码中此处有一语句"window.event.cancelbubble == true;"，我没看懂，删了~~
注3：原(M$)代码中条件还包含"(divColl(i).className == "child4")||"，我实在没看明白有什么作用，删了，有知道的大虾还请指教；
注4：原(M$)代码中不包含此部分代码，我加上的，让 parent 也能主动关闭。
最后还有一点说明，在每一个有子菜单的层上加一个语句onmouseOver="...","..."就是onClick里边的东东，试试看，你看到了什么？
-->

php爱好者　站 http://www.phpfans.net 网页制作|网站建设|数据采集.