 |
|
|
 首页 |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
我在许多的网站上看到上面都有下拉菜单的,使得网站更栩栩如生了!象微软的主页,后来我想如果单用div和JAvascript是否也能实现了,通过几次实验也总于成功了,现在把自己想法告诉大家,希望大家网页也加上下拉菜单使网爷更生动. 以前DOS下编写应用程序都要面临着界面编写的,象菜单这些东西也要自己从头到尾都要自己编的,到了win时代,通过事件驱动我们就很轻易编写了,何况菜单集成到系统里了,在IE下编写菜单也是基于通过捕捉鼠标事件来响应菜单下拉和隐藏的, 我们首先要用表格来显示菜单条, <table> <tr> <td height="9" width="100" align=center bgcolor="#33FFFF" onmouseover="showmenu(menuwenxue)">menu1</td> <td height="9" width="100" align=center bgcolor="#33FFFF" onmouseover="showmenu(menuxuexi)">menu1</td> <tr> <table> <div id="menuwenxue" style="position:absolute; width:90px; height:115px; z-index:1; left: 245px; top: 75px; visibility: hidden" onmouseout="hidemenu(menuwenxue)"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" onmouseout="hidemenu(menuwenxue)"> <tr> <td height="10" class="menufont" onmouseover="showmenu(menuwenxue)"> </td> </tr> <tr> <td height="28" align=center class="menufont" bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="JavaScript:alert(\\'menu1_item1\\')">menu1_item1</a></td> </tr> <tr> <td height="31" align=center bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="JavaScript:alert(\\'menu1_item2\\')">menu1_item2</a></td> </tr> <tr> <td height="30" align=center bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="JavaScript:alert(\\'menu1_item3\\')">menu1_item3</a></td> </tr> </table> </div> <div id="menuxuexi" style="position:absolute; width:90px; height:115px; z-index:1; left: 340px; top: 75px; visibility: hidden" onmouseout="hidemenu(menuxuexi)"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" onmouseout="hidemenu(menuxuexi)"> <tr> <td height="10" onmouseover="showmenu(menuxuexi)"> </td> </tr> <tr> <td height="27" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="JavaScript:alert(\\'menu2_item2\\')">menu2_item1</a></td> </tr> <tr> <td height="31" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="JavaScript:alert(\\'menu2_item2\\')">menu2_item2</a></td> </tr> <tr> <td height="30" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="JavaScript:alert(\\'menu2_item3\\')">menu2_item3</a></td> </tr> </table> </div> <Script language="JavaScript"> <!-- function showmenu(menu){ if(menushow) menushow.style.visibility="hidden" menushow=menu menu.style.visibility="visible" } function hidemenu(menu){ menu.style.visibility="hidden" } function hideshow() { if(menushow) menushow.style.visibility="hidden" } --> </script> --> </script> 上面是我从调试代码上截下来的,要想得到好看的结果需要改变一下位子关系的,当然还要注重一下鼠标移动时候是否菜单会出现非常现象的,当然这些都可以通过加一些代码来解决的,主要是鼠标移出菜单外,菜单不会消失的,可以在其它的对象截取onmouseover事件来隐藏菜单的! 【本文版权归作者与奥索网共同拥有，如需转载，请注明作者及出处】 返回类别: 教程 上一教程: 通过事例学习.net的WebForms技术(三) 下一教程: 负载平衡环境下的ASP会话治理(2) 您可以阅读与"用DHTML来模仿实现下拉菜单"相关的教程: · 介绍一个制作下拉菜单完全不同的办法 · 下拉菜单支持输入，并根据输入内容自动定位 · 三层动态下拉菜单的例子 · 动态创建下拉菜单 · 不刷新页面改变下拉菜单内容 |
  |
| 快精灵印艺坊 版权所有 |
首页 会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店
|
||
