------------------------------------------------------ <html> <head> <title>菜单实例</title> <style type=text/css> td,div { font: normal 12px 宋体; } </style> </head> <body style="margin-left:12px;margin-top:16px;"> <table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#CCCCCC> <tr> <td width=10> </td> <td width=80 align=center onmouseover="menuShow(menu01)" onmouseout="menuHide(menu01)">菜单实例</td> <!-- 上两行为菜单中显示的文字，注意这里面的事件触发： onmouseover="menuShow(menu01)" 鼠标经过时显示菜单； onmouseout="menuHide(menu01)" 鼠标移走时隐藏菜单。 参数menu01即要显示的菜单的id，将在接下来的代码中看到。 menuShow与menuHide分别为显示、隐藏菜单方法，将在后面定义。 --> <td> </td> </tr> </table> <div style="position:absolute;top:36px;left:20px;display:none; width:80px;height:100px;background-color:#DDDDDD;" id=menu01 onmouseover="menuShow(this)" onmouseout="menuHide(this)"> <!-- 以上三行，定义了菜单的一些属性，注意“id=menu01”，前面提到过。 position、top、left、display四个CSS属性即上一章讲过的； width、height、background-color分别为宽度、高度、背景色。 这里再一次出现onmouseover="menuShow(this)" onmouseout="menuHide(this)"， 就是说当鼠标从菜单按钮上移开，如果是移到了菜单上，菜单仍然显示。 注意这里参数是this而不是menu01，this即对象本身，在这里就是指menu01，所以结果相同。 在这里笔者有意使用this，只是想告诉大家一个技巧，这在很多时候非常方便。 --> <br> 菜单内容 </div> <script language=javascript> function menuShow(menu) //定义显示菜单的方法，参数menu即菜单的id。 { menu.style.display='block'; //注意这里如何用JavaScript改变style对象的属性来达到改变CSS属性的目的。 } function menuHide(menu) //定义隐藏菜单的方法，参数menu即菜单的id。 { menu.style.display='none'; //同上 } </script> </body> </html> ------------------------------------------------------
Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长：MinTao ICP备案号：鄂ICP备11006601号-18
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
