JavaScript特效：弹出菜单

最新推荐文章于 2021-06-09 19:27:02 发布

skykings520

最新推荐文章于 2021-06-09 19:27:02 发布

阅读量523

点赞数

分类专栏： JavaScript 文章标签： javascript html dreamweaver menu generator function

本文链接：https://blog.youkuaiyun.com/skykings520/article/details/5104043

版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建一个动态弹出菜单。通过在HTML中定义样式和JavaScript函数，实现了鼠标悬停在菜单项上时显示对应的子菜单，离开时自动隐藏。详细代码和实例演示链接提供。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Generator" content="Dreamweaver8" />
<meta name="Author" content="枫叶随风 QQ:455948725 E-mail:liukun615@126.com" />
<link rel="shortcut icon" href="http://www.fengyekun.com/favicon.ico" />
<title>JavaScript弹出菜单</title>
<style type="text/css">

</style>
<script language="javascript" type="text/javascript">
function GetID(ObjID){
    return document.getElementById(ObjID);
}
function RemoveChild(ObjID){
    var Node=GetID(ObjID);
    if (Node) Node.parentNode.removeChild(Node);
}

function Menu(Num){
    RemoveChild("menudiv");

    var Html="",LeftCoor;
    Html+="<table cellSpacing=/"0/" cellPadding=/"0/" border=/"0/">";
    switch(Num){
    case 0:
        Html+="<tr><td>一一一一一</td></tr>";
        Html+="<tr><td>一一一一一</td></tr>";
        Html+="<tr><td>一一一一一</td></tr>";
        Html+="<tr><td>一一一一一</td></tr>";
        Html+="<tr><td>一一一一一</td></tr>";
        break;
    case 1:
        Html+="<tr><td>二二二二二</td></tr>";
        Html+="<tr><td>二二二二二</td></tr>";
        Html+="<tr><td>二二二二二</td></tr>";
        Html+="<tr><td>二二二二二</td></tr>";
        Html+="<tr><td>二二二二二</td></tr>";
        break;
    case 2:
        Html+="<tr><td>三三三三三</td></tr>";
        Html+="<tr><td>三三三三三</td></tr>";
        Html+="<tr><td>三三三三三</td></tr>";
        Html+="<tr><td>三三三三三</td></tr>";
        Html+="<tr><td>三三三三三</td></tr>";
        break;
    case 3:
        Html+="<tr><td>四四四四四</td></tr>";
        Html+="<tr><td>四四四四四</td></tr>";
        Html+="<tr><td>四四四四四</td></tr>";
        Html+="<tr><td>四四四四四</td></tr>";
        Html+="<tr><td>四四四四四</td></tr>";
    }
    Html+="</table>";

    var MenuDiv=document.createElement("div");
    MenuDiv.id="menudiv";
    MenuDiv.style.position="absolute";
    MenuDiv.style.left=Num*100+"px";
    MenuDiv.style.display="block";
    MenuDiv.οnmοuseοver=function(){KeepMenu();}
    MenuDiv.οnmοuseοut=function(){HiddenMenu();}
    MenuDiv.innerHTML=Html;
    GetID("nav").appendChild(MenuDiv);
}

function HiddenMenu(){
    GetID("menudiv").style.display="none";
}
function KeepMenu(){
    GetID("menudiv").style.display="block";
}
</script>
</head>
<body>
<div id="main">
    <div id="content">

        <div id="navbg">
          <div id="nav">
            <ul id="menu">
                <li><a href="" οnmοuseοver="Menu(0);" οnmοuseοut="HiddenMenu();">菜单一</a></li>
                <li><a href="" οnmοuseοver="Menu(1);" οnmοuseοut="HiddenMenu();">菜单二</a></li>
                <li><a href="" οnmοuseοver="Menu(2);" οnmοuseοut="HiddenMenu();">菜单三</a></li>
                <li><a href="" οnmοuseοver="Menu(3);" οnmοuseοut="HiddenMenu();">菜单四</a></li>
            </ul>
        </div>
        </div>

    </div>
</div>
<script language="JavaScript" type="text/javascript">GetID("main").style.height=document.documentElement.clientHeight+"px";</script>
</body>
</html>