onmouseover="display('0')"
onmouseout="menuout('0')">编 辑</td>
<td id="menu2" width="20%" align="center"
onmouseover="display('0')"
onmouseout="menuout('0')">查 看</td>
<td id="menu3" width="20%" align="center"
onmouseover="display('0')"
onmouseout="menuout('0')">跳 转</td>
<td id="menu4" width="20%" align="center"
onmouseover="display('0')"
onmouseout="menuout('0')">工 具</td>
</tr>
</table>
</center></div></div>
<p><!--webbot bot="PurpleText" PREVIEW="主菜单条定义结束" --></p>
<p><!--webbot bot="PurpleText" PREVIEW="以下定义弹出菜单" --></p>
<div id="submenu0"
style="position:absolute;top:100;left:100;width:80;display:none; background-color:lightskyblue;"><div
align="center"><center>
<table id="tb0" border="1" width="80px" cellspacing="0"
cellpadding="0">
<tr><td id="item00"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('00')" onmouseout="itemout('00')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 新建</td>
</tr> <tr>
<td id="item01"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('01')" onmouseout="itemout('01')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 打开</td>
</tr> <tr> <td id="item02"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('02')" onmouseout="itemout('02')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 保存</td>
</tr> <tr>
<td id="item04"
style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"
onmouseover="itemover('04')" onmouseout="itemout('04')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 页面设置</td>
</tr>
<tr>
<td id="item05"
style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"
onmouseover="itemover('05')" onmouseout="itemout('05')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 预览</td>
</tr>
<tr>
<td id="item06"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('06')" onmouseout="itemout('06')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 打印</td>
</tr>
<tr>
<td id="item07"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('07')" onmouseout="itemout('07')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 退出</td> </tr></table>
</center></div></div>
<p><!--webbot bot="PurpleText" PREVIEW="弹出菜单定义结束" --></p>
</body></html>
上述代码实现的效果如下图所示:
需要说明的几个问题:
在以上例子中,为了减小代码的长度,已将弹出菜单简化成了一个,即弹出的菜单都一样。
上例中,代码看起来很多,事实上整个页面才5134字节,制作起来也很容易,大部分工作只是拷贝和粘贴。
如果,您想在自己的机器上演示一下上述效果,只需要将上例中的代码拷下来,然后另存为一个HTM类型(如 menu.htm)的文件,然后用鼠标双击该文件即可看到这种效果,也可访问http://liqishuan.163.net/menu.htm 直接看到。
广东浮法玻璃有限公司信息部
李启拴
地址 :广东省深圳市蛇口工业区海湾路八号
邮编 :518067
E-mail : liqishuan@163.net
onmouseout="menuout('0')">编 辑</td>
<td id="menu2" width="20%" align="center"
onmouseover="display('0')"
onmouseout="menuout('0')">查 看</td>
<td id="menu3" width="20%" align="center"
onmouseover="display('0')"
onmouseout="menuout('0')">跳 转</td>
<td id="menu4" width="20%" align="center"
onmouseover="display('0')"
onmouseout="menuout('0')">工 具</td>
</tr>
</table>
</center></div></div>
<p><!--webbot bot="PurpleText" PREVIEW="主菜单条定义结束" --></p>
<p><!--webbot bot="PurpleText" PREVIEW="以下定义弹出菜单" --></p>
<div id="submenu0"
style="position:absolute;top:100;left:100;width:80;display:none; background-color:lightskyblue;"><div
align="center"><center>
<table id="tb0" border="1" width="80px" cellspacing="0"
cellpadding="0">
<tr><td id="item00"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('00')" onmouseout="itemout('00')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 新建</td>
</tr> <tr>
<td id="item01"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('01')" onmouseout="itemout('01')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 打开</td>
</tr> <tr> <td id="item02"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('02')" onmouseout="itemout('02')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 保存</td>
</tr> <tr>
<td id="item04"
style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"
onmouseover="itemover('04')" onmouseout="itemout('04')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 页面设置</td>
</tr>
<tr>
<td id="item05"
style="cursor:hand;filter: invert(enabled=0); background-color: maroon; color: cyan; border: 0"
onmouseover="itemover('05')" onmouseout="itemout('05')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 预览</td>
</tr>
<tr>
<td id="item06"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('06')" onmouseout="itemout('06')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 打印</td>
</tr>
<tr>
<td id="item07"
style="cursor:hand;filter: invert(enabled=0); background-color:
maroon; color: cyan; border: 0"
onmouseover="itemover('07')" onmouseout="itemout('07')"
onclick="hidesubmenu('0')"
width="100%" height="25"> 退出</td> </tr></table>
</center></div></div>
<p><!--webbot bot="PurpleText" PREVIEW="弹出菜单定义结束" --></p>
</body></html>
上述代码实现的效果如下图所示:
需要说明的几个问题:
在以上例子中,为了减小代码的长度,已将弹出菜单简化成了一个,即弹出的菜单都一样。
上例中,代码看起来很多,事实上整个页面才5134字节,制作起来也很容易,大部分工作只是拷贝和粘贴。
如果,您想在自己的机器上演示一下上述效果,只需要将上例中的代码拷下来,然后另存为一个HTM类型(如 menu.htm)的文件,然后用鼠标双击该文件即可看到这种效果,也可访问http://liqishuan.163.net/menu.htm 直接看到。
广东浮法玻璃有限公司信息部
李启拴
地址 :广东省深圳市蛇口工业区海湾路八号
邮编 :518067
E-mail : liqishuan@163.net


