当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS代码实现左键弹出式菜单

JS代码实现左键弹出式菜单

2012/11/2 11:21:28作者:佚名来源:网络

移动端

【实例名称】

JS代码实现左键弹出式菜单

【实例描述】

在默认的网页中,使用右键可以弹出常用的操作菜单。本例学习使用左键弹出网站的导航菜单。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>标题页-学无忧(www.xue51.com)</title> <style type="text/css"> a.{ font: 9pt "宋体"; cursor: hand; font-size: 9pt ; color: #ffffff; text-decoration: none } a:active{ font: 9pt "宋体"; cursor: hand; color: #FF0033 } a.cc:hover{ font: 9pt "宋体"; cursor: hand; color: #FF0033} .box{ font: 10pt "宋体"; position: absolute;  background: #ccbbcc } </style> <script language="JavaScript"> function popUp() { newX = window.event.x + document.body.scrollLeft; newY = window.event.y + document.body.scrollTop; menu = document.all.menutable; if ( menu.style.display == "") { menu.style.display = "none" } else { menu.style.display = "";} menu.style.pixelLeft = newX - 50; menu.style.pixelTop = newY - 50; } </script>

需要在body的onclick事件中调用上面的方法,同时设置一个table,实现菜单效果。代码如下所示: </head> <body onclick = popUp()> <table id="menutable" class="box" style="display:none;width=120"> <tr> <td>弹出菜单</td> </tr> <tr> <td><a href="#" class="cc">本站搜索</a></td> </tr> <tr> <td><a href="#" class="cc">本站帮助</a></td> </tr> <tr> <td><a href="#" class="cc">当前更新</a></td> </tr> <tr> <td><a href="#" class="cc">联系版主</a></td> </tr> </table> </body> </html>

【运行效果】

 左键弹出式菜单运行效果

【难点剖析】

本例利用了CSS中的隐藏特性。将一个设置好的表格先隐藏起来,当用户单击鼠标左键时,设置“display”属性就可以实现表格的显示。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:左键弹出式菜单 进行本实例源码下载 

标签: 菜单