2019年5月14日
 |  没有评论

简单下拉菜单的实现

<html><head><title>Drop-Down Menus</title>
<script type="text/javascript">
<!-- hide me from older browsers
var div_array = new Array("divOne", "divTwo", "divThree");
function changeDiv(the_div, the_change)
{
    document.getElementById(the_div).style.visibility = the_change;
}

function closeAll()
{
    for (var loop=0; loop < div_array.length; loop++)
    {
       changeDiv(div_array[loop], "hidden");
    }
}
// show me -->
</script>
</head>
<body>




<div id="top1" style="position:absolute; top:20; left:0; z-index:1">
<a href="#" 
    onMouseOver="closeAll(); changeDiv('divOne','visible');">Dogs</a>
</div>

<div id="top2" style="position:absolute; top:20; left:40; z-index:1">
<a href="#" 
    onMouseOver="closeAll(); changeDiv('divTwo','visible');">Cats</a>
</div>

<div id="top3" style="position:absolute; top:20; left:80; z-index:1">
<a href="#" 
    onMouseOver="closeAll(); changeDiv('divThree','visible');">Birds</a>
</div>

<div id="rightBorder" style="position:absolute; top:20; left:50;">
<a href="#" onMouseOver="closeAll();"><img src="long_spacer.gif" border=0></a>
</div>

<div id="bottomBorder" style="position:absolute; top:80; left:0;">
<a href="#" onMouseOver="closeAll();"><img src="long_spacer.gif" border=0></a>
</div>

<div id="divOne" style="position:absolute; top:40; left:0; visibility:hidden;">
<a href="#">Collie</a><br>
<a href="#">Puli</a><br>
<a href="#">Corgie</a><br>
</div>

<div id="divTwo" style="position:absolute; top:40; left:40; visibility:hidden">
<a href="#">Siamese</a><br>
<a href="#">Manx</a><br>
<a href="#">Calico</a><br>
</div>

<div id="divThree" style="position:absolute; top:40; left:80; visibility:hidden">
<a href="#">Parakeet</a><br>
<a href="#">Finch</a><br>
<a href="#">Canary</a><br>
</div>
</body>
</html>
标签：