解读M$源代码：JavaScript+CSS实现动态菜单显示

最新推荐文章于 2019-08-02 17:40:05 发布

zgqtxwd

最新推荐文章于 2019-08-02 17:40:05 发布

阅读量389

点赞数

分类专栏： javascript 文章标签： javascript css class function 文档工作

javascript 专栏收录该内容

589 篇文章 0 订阅

订阅专栏

<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 mousedown() {
  var vsrc = window.event.srcelement;
  divcoll=document.all.tags("div");
  for (i=0; i < divcoll.length; i++) {
      if (((divcoll(i).classname == "parent")||(divcoll(i).classname == "child2")||(divcoll(i).classname == "child3"))&&(divcoll(i).id != vsrc.id))/*注3*/ {
        divcoll(i).style.backgroundcolor = "";
    }
    if (((divcoll(i).classname == "parent")||(divcoll(i).classname == "child2")||(divcoll(i).classname == "child3"))&&(divcoll(i).id == vsrc.id))/*注3*/ {
         divcoll(i).style.backgroundcolor = "#ffffff";
         fcolor = "#ffffff";
    }
}
}

function mouseup() {
  var vsrc = window.event.srcelement;
  if (vsrc.classname == "child2" || vsrc.classname == "child3" || vsrc.classname == "parent") {
    /*注2*/
  }
}
//

function closeall(el) {
    divcoll=document.all.tags("div");
    for (i=0; i<divcoll.length; i++) {
        felel=eval(el + "child1");
        if ((divcoll(i).classname == "child1") && (felel != divcoll(i))) {
            divcoll(i).style.display="none";
        }
    }
}

function navonload() {
    divcoll=document.all.tags("div");
    for (i=0; i< divcoll.length; i++) {
        if (divcoll(i).classname == "child1" || divcoll(i).classname == "child4") {
            if (divcoll(i).classname == "child4" && divcoll(i).style.display == "block") {
                whicharrow = eval(divcoll(i).arr);
                whicharrow.src = "../images/tocuparw.gif";
            }
        }
    }
}

function expandie(el) {
    whichel=eval(el + "child1");
    closeall(el);
    if (whichel.style.display != "block") {
        whichel.style.display = "block";
        whichel.isexpanded=true;
    }/*注4*/else {
        whichel.style.display = "none";
        whichel.isexpanded=false;
    }/*注4*/
}

function expandie2(el) {
    whichel=eval(el + "child3");
    whichim=event.srcelement;
    if (whichel.style.display != "block") {//当被点击对象没有展开下级菜单时，展开下级菜单
        whichel.style.display = "block";
        whichel.isexpanded=true;
        whicharrow = eval(whichim.arr);
        whicharrow.src = "../images/tocuparw.gif";
    } else {//当被点击对象已经展开下级菜单时，隐藏下级菜单
        whichel.style.display="none";
        whichel.isexpanded=false;
        whicharrow = eval(whichim.arr);
        whicharrow.src = "../images/tocdnarw.gif";
    }
}
            </script>
        
        <style>
            a:link
            {
             color:000000;
             text-decoration: none;
            }
            a:visited
            {
             color:666666;
             text-decoration: none;
             }
            body
            {
             background-repeat:repeat-y ;
             font-family:宋体,arial;
            }
            .parent
            {
             position:relative;
             display:block;
             font-weight:bold;
             font-size:9pt;
             padding:1pt;
             padding-left:8pt;
             width:168px;
             top:0;
             cursor:hand;
             margin-bottom:2;
            }
            .child1
            {
             display:none;
             font-size:9pt;
             width:168px;
             padding-bottom:4pt;
             cursor:hand;
             margin-bottom:2;
            }
            .child2
            {
             display:block;
             font-size:9pt;
             padding:1pt;
             width:168px;
             padding-left:14pt;
             cursor:hand;
             margin-bottom:2;
            }
            .child3
            {
             display:block;
             font-size:9pt;
             padding:1pt;
             padding-left:20pt;
             width:168px;
             cursor:hand;
             margin-bottom:2;
            }
            .child4
            {
             display:block;
             font-size:9pt;
             width:168px;
             cursor:hand;
             margin-bottom:2;
            }
            .master
            {
             position:relative;
             display:block;
             padding:1pt;
             width:168px;
             padding-top:12px;
            }
            #navigation
            {
             position:absolute;
             top:101;
             left:0;
             z-index:1;
             width:170px;
             height:340px;
             overflow:auto;
            }
        </style>
        <base target="submain">
    </head>
    <body οnlοad="navonload();this.focus();" leftmargin="0" topmargin="0" bgcolor="white" background="bluetoc.gif" text="black" link="black" vlink="#005baa">
        <div id="navigation">
            <div id="masterone" class="master">
                <a href="wrkwfile/mainwork.htm">
                    <div id="files" οnkeypress="expandie('etuone');mousedown()" οnclick="expandie('etuone')" class="parent">
                        处理文件
                    </div>
                </a>
                <div id="etuonechild1" class="child1">
                    <a href="wrkwfile/trakdocs.htm">
                        <div οnkeypress="expandie2('etutwo');mousedown()" οnclick="expandie2('etutwo')" id="track" class="child2" arr="arrow1">
                            <img id="arrow1" src="../images/tocdnarw.gif" width="9" height="9" border="0" alt="" align="middle" hspace="0">
                            跟踪文档
                        </div>
                    </a>
                    <div id="etutwochild3" class="child4" style="display:none" arr="arrow1">
                        <a href="wrkwfile/mynetwrk.htm">
                            <div id="mynet" class="child3" οnkeypress="mousedown();">
                                网上邻居
                            </div>
                        </a><a href="wrkwfile/mydocs.htm">
                            <div id="mydocs" class="child3" οnkeypress="mousedown();">
                                我的文档
                            </div>
                        </a><a href="wrkwfile/opensave.htm">
                            <div id="open" class="child3" οnkeypress="mousedown();">
                                文件打开/另存为
                            </div>
                        </a><a href="wrkwfile/history.htm">
                            <div id="histroy" class="child3" οnkeypress="mousedown();">
                                历史文件夹
                            </div>
                        </a>
                    </div>
                    <a href="wrkwfile/associat.htm">
                        <div id="assoc" class="child2" οnkeypress="mousedown();">
                            关联文件类型
                        </div>
                    </a><a href="wrkwfile/imageman.htm">
                        <div id="imageman" class="child2" οnkeypress="mousedown();">
                            处理图像
                        </div>
                    </a><a href="wrkwfile/rdyavprt.htm">
                        <div id="readily" class="child2" οnkeypress="mousedown();">
                            管理打印
                        </div>
                    </a>
                </div>
                <a href="findinfo/mainfind.htm">
                    <div id="find" οnkeypress="expandie('etuthree');mousedown()" οnclick="expandie('etuthree')" class="parent">
                        查找信息
                    </div>
                </a>
                <div id="etuthreechild1" class="child1">
                    <a href="findinfo/indexing.htm">
                        <div id="index" class="child2" οnkeypress="mousedown();">
                            索引内容
                        </div>
                    </a><a href="findinfo/search.htm">
                        <div id="search" class="child2" οnkeypress="mousedown();">
                            集成搜索
                        </div>
                    </a><a href="findinfo/actsrch.htm">
                        <div id="actsear" class="child2" οnkeypress="mousedown();">
                            active directory
                        </div>
                    </a>
                </div>
                <a href="personal/mainprsn.htm">
                    <div id="person" οnkeypress="expandie('etufour');mousedown()" οnclick="expandie('etufour')" class="parent">
                        个人化
                    </div>
                </a>
                <div id="etufourchild1" class="child1">
                    <a href="personal/strtmenu.htm">
                        <div id="startm" class="child2" οnkeypress="mousedown();">
                            开始菜单
                        </div>
                    </a><a href="personal/custtlbr.htm">
                        <div id="custo" class="child2" οnkeypress="mousedown();">
                            工具栏
                        </div>
                    </a><a href="personal/actdsktp.htm">
                        <div id="acti" class="child2" οnkeypress="mousedown();">
                            活动桌面
                        </div>
                    </a><a href="personal/access.htm">
                        <div id="acc" class="child2" οnkeypress="mousedown();">
                            辅助向导
                        </div>
                    </a><a href="personal/multlang.htm">
                        <div id="multi" class="child2" οnkeypress="mousedown();">
                            多语言技术
                        </div>
                    </a>
                </div>
                <a href="wrkonweb/mainwork.htm">
                    <div id="web" οnkeypress="expandie('etufive');mousedown()" οnclick="expandie('etufive')" class="parent">
                        在 web 上工作
                    </div>
                </a>
                <div id="etufivechild1" class="child1">
                    <a href="wrkonweb/inetcwiz.htm">
                        <div id="inetcon" class="child2" οnkeypress="mousedown();">
                            internet 连接向导
                        </div>
                    </a><a href="wrkonweb/favui.htm">
                        <div id="favui" class="child2" οnkeypress="mousedown();">
                            个人收藏夹窗格
                        </div>
                    </a>
                </div>
                <a href="workremo/mainremo.htm">
                    <div id="remote" οnkeypress="expandie('etusix');mousedown()" οnclick="expandie('etusix'); mousedown();" class="parent">
                        远程工作
                    </div>
                </a>
                <div id="etusixchild1" class="child1">
                    <a href="workremo/remotely.htm">
                        <div id="remotely" οnkeypress="expandie2('etuseven');mousedown()" οnclick="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" οnkeypress="mousedown();">
                                脱机文件
                            </div>
                        </a><a href="workremo/offlnwb.htm">
                            <div id="offweb" class="child3" οnkeypress="mousedown();">
                                脱机浏览 web
                            </div>
                        </a><a href="workremo/syncman.htm">
                            <div id="sync" class="child3" οnkeypress="mousedown();">
                                同步管理器
                            </div>
                        </a>
                    </div>
                    <a href="workremo/netconmn.htm">
                        <div id="netcon" class="child2" οnkeypress="mousedown();">
                            网络和拨号连接文件夹
                        </div>
                    </a><a href="workremo/efs.htm">
                        <div id="efs" class="child2" οnkeypress="mousedown();">
                            加密文件系统
                        </div>
                    </a><a href="workremo/conspowr.htm">
                        <div id="cons" class="child2" οnkeypress="mousedown();">
                            电源管理
                        </div>
                    </a><a href="workremo/infrared.htm">
                        <div id="infra" class="child2" οnkeypress="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>

 < <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>