Zhlw.com - 中华龙网

站长资讯通告:
搜索: 您的位置中华龙网 > 计算机网络 > 电脑医院 > 电脑基础 > 文章列表

在Web页面上制作Windows风格的菜单(二)

作者:bear  来源:转载  发布时间:2005-12-23 16:36:54
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


        用户名: 验证码: 验证码,看不清楚?请点击刷新验证码 (注“”为必填内容。)


文章评论: [ 查看全部 ] 网友评论
关于本站 - 网站帮助 - 广告合作 - 友情连接 - 网站地图