快捷導(dǎo)航

JavaScript CSS創(chuàng)建右擊菜單效果代碼

更新時(shí)間：2008年12月02日 15:02:52 作者：

右擊菜單效果

效果圖：

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>css和javascript創(chuàng)建頁(yè)面右鍵菜單</title> <style type="text/css"> body { font-family: "宋體"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋體"; line-height: 20px; cursor: default; visibility: hidden; } .skin1 { padding-top: 4px; cursor: default; font: menutext; text-align: left; font-family: "宋體"; font-size: 10pt; width: 100px; background-color: menu; border: 1 solid buttonface; visibility: hidden; border: 2 outset buttonhighlight; } </style>  </head> <body> 右鍵菜單創(chuàng)建測(cè)試效果吧！ <div   class="wppm3vysvbp"   id="ie5menu" class="skin0"> <div onclick="alert('后退請(qǐng)三思！)">后退</div> <div onclick="alert('祝你前程似錦，大膽往前走吧！')">前進(jìn)</div> <hr> <div url="http://www.fzitv.net" target="_blank" onclick="jumptoie5()">腳本之家</div> <div url="http://www.fzitv.net/photoshop/" target="_blank" onclick="jumptoie5()">photoshop教程</div> <div url="http://www.fzitv.net/list/list_3_1.htm" target="_blank" onclick="jumptoie5()">javascript</div> <div url="http://www.fzitv.net/list/list_114_1.htm" target="_blank" onclick="jumptoie5()">vbscript</div> <hr> <div url="http://www.fzitv.net/softs/index.html" target="_blank" onclick="jumptoie5()">軟件下載</div> <div url="http://www.mydown.com/codes/" target="_blank" onclick="jumptoie5()">源碼下載</div> <hr> <div url="http://www.fzitv.net/list/list_6_1.htm" target="_blank" onclick="jumptoie5()">正則表達(dá)式</div> <div url="http://www.fzitv.net/support.htm" onclick="jumptoie5()">聯(lián)系我</div> </div>　　 </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

代碼解釋：
1、在頁(yè)面載入時(shí)，先執(zhí)行l(wèi)oad1()方法
首先檢驗(yàn)是不是IE瀏覽器，如果當(dāng)前瀏覽器是Internet Explorer，document.all就返回真。則下面的定義就應(yīng)該有效。也就是說(shuō)當(dāng)檢查到客戶端使用的瀏覽器是IE的時(shí)候那么當(dāng)用戶產(chǎn)生右鍵事件時(shí)就調(diào)用函數(shù) showmenuie5，當(dāng)用戶產(chǎn)生左鍵事件時(shí)就調(diào)用函數(shù)hidemenuie5。
2、接著我們要考慮如何通過(guò)函數(shù)showmenuie5和函數(shù)hidemenuie5來(lái)實(shí)現(xiàn)菜單的顯示和隱藏。
當(dāng)然，這里的菜單并不是真正意義的右鍵菜單，而是我們自己做的一個(gè)div，在這個(gè)div中裝上我們想要裝的東西。通過(guò)鼠標(biāo)事件調(diào)用函數(shù)來(lái)控制它的顯隱，這就達(dá)到了使用鼠標(biāo)右鍵一樣的效果了。
這一塊的最外層是一個(gè)id為ie5menu的div，我們定義了它的樣式為skin0，你也可以根據(jù)自定義其他樣式，然后替換skin0。
3、點(diǎn)擊菜單選項(xiàng)后的操作
jumptoie5()函數(shù)實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊右鍵菜單中的層時(shí)發(fā)生的事情，也就是執(zhí)行選項(xiàng)

您可能感興趣的文章: