windows菜单(自己动手代码比较短)(JS)


测试菜单是我的原创,getie这个函数从网上找到的,呵呵

算法需要改进.

caidan.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>javascript弹出菜单，盘古制作</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript" src="caidan.js"></SCRIPT>
<BODY>
<TABLE>
<TR>
    <TD rowspan=2 id="leftmain">
        <TABLE>
            <TR id="menu1">
                <TD><A HREF="#" onmouseover="showsubmenu(submenu1)" onmouseout="hidesubmenu(submenu1)">menu1</A></TD>
            </TR>
            <TR id="menu2">
                <TD><A HREF="#" onmouseover="javascript:showsubmenu(submenu2)" >menu2</A></TD>
            </TR>
            <TR id="menu3">
                <TD><A HREF="#" onmouseover="javascript:showsubmenu(submenu3)" onmouseout="hidesubmenu(submenu3)">menu3</A></TD>
            </TR>
            <TR id="menu4">
                <TD><A HREF="#" onmouseover="javascript:showsubmenu(submenu4)" onmouseout="hidesubmenu(submenu4)">menu4</A></TD>
            </TR>
        </TABLE>    
    </TD>    
</TR>

<TR>
    <TD id="rightspacer"></TD><!--控制菜单起始高度-->
    <TD id="submenu" style=""><!--顺序放置子菜单-->
            
    </TD>
</TR>
</TABLE>


<div id="submenu1" style="visibility:hidden;" onmouseout="hidesubmenu(submenu1)" bgcolor=blue>
                <TABLE>
                <TR>
                    <TD>submenu1_1</TD>
                </TR>
                <TR>
                    <TD>submenu2_1</TD>
                </TR>
                <TR>
                    <TD>submenu3</TD>
                </TR>
                <TR>
                    <TD>submenu4</TD>
                </TR>
                </TABLE>
            </div>

            <div id="submenu2" style="visibility:hidden;" onmouseout="hidesubmenu(submenu2)" bgcolor=blue>
                <TABLE>
                <TR>
                    <TD>submenu1_1</TD>
                </TR>
                <TR>
                    <TD>submenu2_1</TD>
                </TR>
                <TR>
                    <TD>submenu3</TD>
                </TR>
                <TR>
                    <TD>submenu4</TD>
                </TR>
                </TABLE>
            </div>
            <div id="submenu3" style="visibility:hidden;" onmouseout="hidesubmenu(submenu3)" bgcolor=blue>
                <TABLE>
                <TR>
                    <TD>submenu1_1</TD>
                </TR>
                <TR>
                    <TD>submenu2_1</TD>
                </TR>
                <TR>
                    <TD>submenu3</TD>
                </TR>
                <TR>
                    <TD>submenu4</TD>
                </TR>
                </TABLE>
            </div>
            <div id="submenu4" style="visibility:hidden;" onmouseout="hidesubmenu(submenu4)" bgcolor=blue>
                <TABLE>
                <TR>
                    <TD>submenu1_1</TD>
                </TR>
                <TR>
                    <TD>submenu2_1</TD>
                </TR>
                <TR>
                    <TD>submenu3</TD>
                </TR>
                <TR>
                    <TD>submenu4</TD>
                </TR>
                </TABLE>
            </div>
</BODY>
</HTML>



caidan.js


oldid="";//全局变量，存储上一个菜单的ID
function showsubmenu(MenuID)
{
if (!oldid==""){
    oldmenu=document.getElementById(oldid);
    hidesubmenu(oldmenu);
}
oldid=MenuID.id; //定义需要隐藏的上一个菜单,这里如果直接赋予对象,则下一次会出现找不到对象的错误.
id=new Array(2);  //定义数组存储主菜单的绝对位置
var mainmenuid,Mainmenu;
mainmenuid=MenuID.id.substr(3,MenuID.id.length-3);//得到主菜单的id以便取位置
Mainmenu=document.getElementById(mainmenuid);//得到主菜单对象

id=getIE(Mainmenu);//得到主菜单的绝对位置
//alert(id[0]);
MenuID.style.position="absolute";
MenuID.style.left=id[1]+40;
MenuID.style.top=id[0];
MenuID.style.visibility="visible";
}
function hidesubmenu(MenuID)
{
MenuID.style.visibility="hidden";
oldid.id="";
}

function getIE(e){
pos=new Array(2);
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
pos[0]=t;
pos[1]=l;

return pos;

}



Posted on 2005-04-29 17:12  古代  阅读(622)  评论(1)    收藏  举报