您的位置：首页 > Web前端 > JavaScript

javascript-下拉菜单的实现

2016-05-23 09:13 411 查看
<html>

<head>

<title>下拉菜单示例</title>

<script language="javascript">

//当鼠标移到菜单选项的时候显示对应的DIV

function show(menu)

{

document.getElementById(menu).style.visibility="visible";

}

//当鼠标移出的时候隐藏所有的DIV

function hide()

{

document.getElementById("menu1").style.visibility="hidden";

document.getElementById("menu2").style.visibility="hidden";

document.getElementById("menu3").style.visibility="hidden";

}

</script>

</head>

<body>

<table>

<tr bgcolor="#9999FF">

<td width="80" onMouseMove="show('menu1')" onMouseOut="hide()">菜单一</td>

<td width="80" onMouseMove="show('menu2')" onMouseOut="hide()">菜单二</td>

<td width="80" onMouseMove="show('menu3')" onMouseOut="hide()">菜单三</td>

</tr>

</table>

<div id="menu1" onMouseMove="show('menu1')"

onMouseOut="hide()" style="background:#9999FF;position:absolute;left=12;top=38;width=80;

visibility=hidden">

<span>子菜单一</span><br>

<span>子菜单二</span><br>

<span>子菜单三</span><br>

</div>

<div id="menu2" onMouseMove="show('menu2')"

onMouseOut="hide()" style="background:#9999FF;position:absolute;left=95;top=38;width=80;

visibility=hidden">

<span >子菜单一</span><br>

<span>子菜单二</span><br>

<span>子菜单三</span><br>

</div>

<div id="menu3" onMouseMove="show('menu3')"

onMouseOut="hide()" style="background:#9999FF;position:absolute;left=180;top=38;width=80;

visibility=hidden">

<span >子菜单一</span><br>

<span>子菜单二</span><br>

<span>子菜单三</span><br>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航