本文介绍了一种使用纯JavaScript和HTML实现下拉菜单自动显示与隐藏的方法。通过简单的脚本和HTML结构，可以在鼠标移出菜单时自动隐藏菜单项，提高用户体验。
要完成此效果需要两个步骤
第一步：把如下代码加入到<head>区域中
<SCRIPT language=javascript><!--
function out()
{
if(window.event.toElement.id!="menu" && window.event.toElement.id!="link")
menu.style.visibility="hidden";
}
//-->
function out1()
{
if(window.event.toElement.id!="menu1" && window.event.toElement.id!="link")
menu1.style.visibility="hidden";
}
//-->
</SCRIPT>
第二步：把如下代码加入到<body>区域中
<div id="back" οnmοuseοut="out()"style="position:absolute;top:225;left:250;width:160;height:40;z-index:1;visibility:visible;">
<span id="menubar" οnmοuseοver="menu.style.visibility='visible'">
<font color=red size=2>菜单一</span>
<div border=1 id="menu" style="position:absolute;top:15;left:0;width:75;height:10;z-index:2;visibility:hidden;">
<a id="link" href="LINK1.htm">LINK1</a>
<a id="link" href="LINK2.htm">LINK2</a>
<a id="link" href="LINK3.htm">LINK3</a>
<a id="link" href="LINK4.htm">LINK4</a>
<a id="link" href="LINK5.htm">LINK5</a>
<a id="link" href="LINK6.htm">LINK6</a>
</div>
</div>
<div id="back" οnmοuseοut="out1()"style="position:absolute;top:225;left:330;width:160;height:40;z-index:3;visibility:visible;">
<span id="menubar" οnmοuseοver="menu1.style.visibility='visible'">
<font color=red size=2>菜单二</span>
<div border=1 id="menu1" style="position:absolute;top:15;left:0;width:50;height:10;z-index:4;visibility:hidden;">
<a id="link" href="LINK1.htm">LINK1</a>
<a id="link" href="LINK2.htm">LINK2</a>
<a id="link" href="LINK3.htm">LINK3</a>
<a id="link" href="LINK4.htm">LINK4</a>
<a id="link" href="LINK5.htm">LINK5</a>
<a id="link" href="LINK6.htm">LINK6</a>
</div>
</div>
</div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
