弹出式导航菜单

来源：互联网发布：java建造者设计模式编辑：程序博客网时间：2024/05/18 03:10

这里利用CSS＋Javascript简单实现弹出式导航菜单功能，鼠标置于主菜单上时，弹出下级菜单，移开后收拢。为方便起见，置于一个文件中。

<html><head><title></title><style type="text/css">*{padding : 0 ;margin : 0 ;}#menu{ position : absolute ; left : 50 ; top : 50 ; width:320; }#menu .child{float:left;width : 100 ;}#menu .child ul{ visibility : hidden ; list-style-type : none ; background:RGB(180, 180, 180); z-index : 10 ;}#menu li a:hover{ background : RGB(128, 128, 64) ;}#menu a{ text-decoration : none ; width:100; }</style><script language="javascript" type="text/javascript">function show(obj){ for(i = 0; i < obj.children.length; i ++ ) { child = obj.children[i]; if(child.tagName.toLowerCase() == "ul") { //child.style.display = "block"; child.style.visibility="visible"; } }}function hide(obj){ for(i = 0; i < obj.children.length; i ++ ) { child = obj.children[i]; if(child.tagName.toLowerCase() == "ul") // child.style.display = "none"; child.style.visibility="hidden"; }}</script></head><body><div id="menu"><div class="child" onmousemove="show(this)" onmouseout="hide(this)"><a href="#" >File</a><ul><li><a href="#">New</a></li><li><a href="#">Open</a></li><li><a href="#">Close</a></li><li><a href="#">Exit</a></li></ul></div><div class="child" onmousemove="show(this)" onmouseout="hide(this)"><a href="#" >Edit</a><ul><li><a href="#">Copy</a></li><li><a href="#">Paste</a></li><li><a href="#">Cut</a></li></ul></div><div class="child" onmousemove="show(this)" onmouseout="hide(this)"><a href="#" >Help</a><ul><li><a href="#">About</a></li><li><a href="#">Context</a></li></ul></div></div></body></html>