弹出式导航菜单

最新推荐文章于 2024-08-24 09:25:15 发布

原创最新推荐文章于 2024-08-24 09:25:15 发布 · 833 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #class #function #float #menu #css

这里利用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>