通行证│用户名: 密码: 验证码: 验证码,看不清楚?请点击刷新验证码 电信网通铁通移动   在线
资源搜索:
热门搜索:Linux VB C语言 PhotoShop Flash TCP/IP
   首页 | 文章 | 软件 | 动画 | 资源 | 励志 | 骗术 | 论坛 | 邮箱 | 会员中心 | 军事 | 科技 | 博客 | 图片 | 商城 | 最新更新 | 800g资源 | 爱心黑客
您现在的位置: 爱国者黑客 >> 资源 >> WEB开发 >> JavaScript >> 应用技巧 >> 文章正文

上一页  [1] [2] [3] 下一页

javascript + CSS 实现动态菜单显示
责任编辑:admin   更新日期:2005-8-6
>
</A><A href="findinfo/search.htm">
<DIV ID="Search" CLASS="child2" onkeypress="mouseDown();">
集成搜索
</DIV>
</A><A href="findinfo/actsrch.htm">
<DIV ID="ActSear" CLASS="child2" onkeypress="mouseDown();">
Active Directory
</DIV>
</A>
</DIV>
<A href="personal/mainprsn.htm">
<DIV ID="Person" onkeypress="expandIE('etuFour');mouseDown()" onClick="expandIE('etuFour')" CLASS="parent">
个人化
</DIV>
</A>
<DIV ID="etuFourChild1" CLASS="child1">
<A href="personal/strtmenu.htm">
<DIV ID="StartM" CLASS="child2" onkeypress="mouseDown();">
开始菜单
</DIV>
</A><A href="personal/custtlbr.htm">
<DIV ID="Custo" CLASS="child2" onkeypress="mouseDown();">
工具栏
</DIV>
</A><A href="personal/actdsktp.htm">
<DIV ID="Acti" CLASS="child2" onkeypress="mouseDown();">
活动桌面
</DIV>
</A><A href="personal/access.htm">
<DIV ID="Acc" CLASS="child2" onkeypress="mouseDown();">
辅助向导
</DIV>
</A><A href="personal/multlang.htm">
<DIV ID="Multi" CLASS="child2" onkeypress="mouseDown();">
多语言技术
</DIV>
</A>
</DIV>
<A href="wrkonweb/mainwork.htm">
<DIV ID="Web" onkeypress="expandIE('etuFive');mouseDown()" onClick="expandIE('etuFive')" CLASS="parent">
在 Web 上工作
</DIV>
</A>
<DIV ID="etuFiveChild1" CLASS="child1">
<A href="wrkonweb/inetcwiz.htm">
<DIV ID="inetCon" CLASS="child2" onkeypress="mouseDown();">
Internet 连接向导
</DIV>
</A><A href="wrkonweb/favui.htm">
<DIV ID="FavUI" CLASS="child2" onkeypress="mouseDown();">
个人收藏夹窗格
</DIV>
</A>
</DIV>
<A href="workremo/mainremo.htm">
<DIV ID="Remote" onkeypress="expandIE('etuSix');mouseDown()" onClick="expandIE('etuSix'); mouseDown();" CLASS="parent">
远程工作
</DIV>
</A>
<DIV ID="etuSixChild1" CLASS="child1">
<A href="workremo/remotely.htm">
<DIV ID="Remotely" onkeypress="expandIE2('etuSeven');mouseDown()" onClick="expandIE2('etuSeven')" Arr="Arrow2" ID="" CLASS="child2">
<IMG id="Arrow2" src="../images/tocdnarw.gif" width="9" height="9" border="0" alt="" align="middle" hspace="0">
脱机工作
</DIV>
</A>
<DIV ID="etuSevenChild3" CLASS="child4" style="display:none" Arr="Arrow2">
<A href="workremo/offlnfld.htm">
<DIV ID="Offfile" CLASS="child3" onkeypress="mouseDown();">
脱机文件
</DIV>
</A><A href="workremo/offlnwb.htm">
<DIV ID="Offweb" CLASS="child3" onkeypress="mouseDown();">
脱机浏览 Web
</DIV>
</A><A href="workremo/syncman.htm">
<DIV ID="Sync" CLASS="child3" onkeypress="mouseDown();">
同步管理器
</DIV>
</A>
</DIV>
<A href="workremo/netconmn.htm">
<DIV ID="NetCon" CLASS="child2" onkeypress="mouseDown();">
网络和拨号连接文件夹
</DIV>
</A><A href="workremo/efs.htm">
<DIV ID="Efs" CLASS="child2" onkeypress="mouseDown();">
加密文件系统
</DIV>
</A><A href="workremo/conspowr.htm">
<DIV ID="Cons" CLASS="child2" onkeypress="mouseDown();">
电源管理
</DIV>
</A><A href="workremo/infrared.htm">
<DIV ID="Infra" CLASS="child2" onkeypress="mouseDown();">
自动红外支持
</DIV>
</A>
</DIV>
</DIV>
</DIV>
<IFRAME src="etu_main.htm" name="SubMain" scrolling="auto" width="470" height="100%" marginwidth="4" marginheight="4" frameborder="No" style="position:relative; top:2; left:180;"></IFRAME>
</Body>
</html>
<!--
本代码中菜单结构如下图:

*************************************************************************************
* *
*处理文件-------------------------------------------------------------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里边的东东,试试看,你看到了什么?
-->
<!--CopyRight By Cheery_Ke,04-07-2002,All Reserved-->

  • 上一篇文章:
  • 下一篇文章:
  • 热门文章
    Olldbg常见问题
    汇编语言的艺术(组合语言的艺术)--观
    汇编语言的艺术(组合语言的艺术)--准
    汇编语言的艺术(组合语言的艺术)--基
    汇编语言的艺术(组合语言的艺术)--基
    汇编语言---程式设计 (4)
    虚拟8086模式
    SYS命令使用说明
    javascript + CSS 实现动态菜单显
    推荐文章
    自制Windows XP SP2自动安装光盘
    SQLServer注入工具改进版 v1.02
    使用photoshop CS进行自然美肤
    Photoshop绘制诺基亚手机
    PHOTOSHOP制作秋日之梦
    PHOTOSHOP鼠绘名模王爱萍
    Photoshop制作晶莹飞溅的水珠
    教你用PHOTOSHOP做放大镜
    鼠绘美女及服装修画全过程