JS代碼實現(xiàn)左鍵彈出式菜單

2012/11/2 11:21:28作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

JS代碼實現(xiàn)左鍵彈出式菜單

【實例描述】

在默認(rèn)的網(wǎng)頁中，使用右鍵可以彈出常用的操作菜單。本例學(xué)習(xí)使用左鍵彈出網(wǎng)站的導(dǎo)航菜單。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>標(biāo)題頁-學(xué)無憂（wangbatian.cn）</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事件中調(diào)用上面的方法，同時設(shè)置一個table，實現(xiàn)菜單效果。代碼如下所示：

</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">當(dāng)前更新</a></td>
</tr>
<tr>
<td><a href="#" class="cc">聯(lián)系版主</a></td>
</tr>
</table>
</body>
</html>
【運行效果】

左鍵彈出式菜單運行效果