CSS+JavaScript打造超酷右鍵菜單

css|javascript|菜單|右鍵

　　其實在網頁上實現右鍵菜單的風格化已經是一個老話題了，正常情況下，網頁上的右鍵菜單是預設IE右鍵選項，包括了一些常用的功能。

　　但有時候我們會遇到這樣的問題，我們希望禁止訪問者使用右鍵菜單或者希望屏蔽右鍵菜單的某些功能，比如，為了保護網頁內容我們不希望訪問者通過右鍵菜單來查看網頁原始碼，也不希望其通過右鍵來對網頁內容進行選取、複製等，很多網頁設計者在考慮這個問題的時候都是簡單地對右鍵進行屏蔽，與其這樣我們還不如用指令碼來實現一個風格右鍵菜單，並在這個右鍵菜單中裝上我們自己的內容。下面我們來嘗試一下這個設想。

　　我們首先要考慮的問題是通過滑鼠右鍵單擊事件來調用一個函數，這個函數用來顯示新的右鍵菜單的內容。我們知道滑鼠的按右鍵事件是通過document.oncontextmenu來調用的，如果我們自行定義document.oncontextmenu=某個函數，這樣就可以實現新右鍵菜單的調用了，關鍵問題是如何通過這個函數來控制功能表的顯示，同時，還要通過表單的單擊事件document.body.onclick（一般指左鍵單擊）來隱藏菜單，這樣一個過程就完成了滑鼠右鍵菜單的彈出和隱藏。

　　首先來看看這段指令碼代碼：

/*初始化*/
<script language="JavaScript1.2">
/*如果當前瀏覽器是Internet Explorer，document.all就返回真*/
if (document.all && window.print) {

/*選擇菜單方塊的顯示樣式*/
ie5menu.className = menuskin;

/*重新導向滑鼠右鍵事件的處理過程為自訂程式showmenuie5*/
document.oncontextmenu = showmenuie5;

/*重新導向滑鼠左鍵事件的處理過程為自訂程式hidemenuie5*/
document.body.onclick = hidemenuie5;
}
</script>

　　一般情況下頁面裝載完畢後才發生滑鼠右鍵事件，所以為了不影響頁面的裝載速度我們可以把這段代碼放在頁面的最後面。這段代碼很簡單，首先檢驗是不是IE瀏覽器，如果是那麼下面的定義就應該有效。也就是說當檢查到用戶端使用的瀏覽器是IE的時候那麼當使用者產生右鍵事件時就調用函數showmenuie5，當使用者產生左鍵事件時就調用函數hidemenuie5。

　　解決了上面這個問題，現在我們要考慮如何通過函數showmenuie5和函數hidemenuie5來實現菜單的顯示和隱藏。當然，這裡的菜單並不是真正意義的右鍵菜單，而是我們自己做的一個div，在這個div中裝上我們想要裝的東西。通過滑鼠事件調用函數來控制它的顯隱，這就達到了使用滑鼠右鍵一樣的效果了。

　　下面我們來設計一個div，請看代碼：

<div id="ie5menu" class="skin0" >
<div class="menuitems" url="javascript:history.back();">後退</div>
<div class="menuitems" url="javascript:history.forward();">前進</div>
<hr>
<div class="menuitems" url="http://www.webjx.com" target="_blank">網頁教學</div>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/3.html" target="_blank">網頁製作</div>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/4.html" target="_blank">動畫製作</div>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/6.html" target="_blank">網路編程</div>
<hr>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/15.html" target="_blank">視頻教程</div>
<div class="menuitems" url="http://www.webjx.com/htmldata/sort/1.html" target="_blank">業界新聞</div>
<hr>
<div class="menuitems" url="http://www.webjx.com/aboutus.htm" target="_blank">關於本站</div>
<div class="menuitems" url="mailto:tslxg@hotmail.com">與我聯絡</div>
</div>

　　這一塊的最外層是一個id為ie5menu的div，我們定義了它的樣式為skin0，當這個div處於顯示狀態時可能產生onMouseover事件和onMouseout事件以及onClick事件，就像我們在使用右鍵菜單時要對其中的選項進行操作一樣，這裡的onMouseover事件、onMouseout事件和onClick事件能夠類比整個滑鼠右鍵事件。這裡，我在右鍵菜單中定義了這麼幾個選項：頁面操作功能、欄目導航功能、網站導覽功能以及其它資訊，能夠起到良好的使用者體驗效果。

　　這裡使用了div的url屬性，其值可以是事件也可以是頁面地址，當然，這個地址包括絕對位址和相對位址，上面的事件也很簡單這裡就不需要我多說了。

　　下面我們來分析幾個函數：showmenuie5()函數（顯示菜單）hidemenuie5()函數（隱藏菜單）以及jumptoie5()函數（右鍵菜單選項跳轉）

　　showmenuie5()函數：

/*顯示菜單*/
function showmenuie5() {
searchform.k.value=window.document.selection.createRange().text;

/*擷取當前滑鼠右鍵按下後的位置，據此定義菜單顯示的位置*/
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;

/*如果從滑鼠位置到視窗右邊的空間小於菜單的寬度，就定位菜單的左座標（Left）為當前滑鼠位置向左一個菜單寬度*/
if (rightedge <ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
/*否則，就定位菜單的左座標為當前滑鼠位置*/
ie5menu.style.left = document.body.scrollLeft + event.clientX;

/*如果從滑鼠位置到視窗下邊的空間小於菜單的高度，就定位菜單的上座標（Top）為當前滑鼠位置向上一個菜單高度*/
if (bottomedge <ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
/*否則，就定位菜單的上座標為當前滑鼠位置*/
ie5menu.style.top = document.body.scrollTop + event.clientY;

/*設定菜單可見*/
ie5menu.style.visibility = "visible";
return false;
}

　　hidemenuie5()函數:

/*隱藏菜單*/
function hidemenuie5() {
/*很簡單，設定visibility為hidden就OK！*/
ie5menu.style.visibility = "hidden";
}

　　jumptoie5()函數：

/*轉到新的連結位置*/
function jumptoie5() {
var seltext=window.document.selection.createRange().text
if (event.srcElement.className == "menuitems") {
/*如果存在開啟連結的目標視窗，就在那個視窗中開啟連結*/
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
/*否則，在當前視窗開啟連結*/
window.location = event.srcElement.url;
}
}　　這三個函數可以說實現右鍵菜單功能的關鍵函數，showmenuie5()函數定義了id為ie5menu的div在document.oncontextmenu的基本屬性,包括其顯示的位置，其位置由滑鼠位置決定，也就是說滑鼠在何處點擊那麼該div就在何處顯示，並且有非常重要的一點，那就是此時該div的樣式的visibility屬性值一定是visible，即是可見的，否則前面定義其顯示位置也就沒有什麼意義了。hidemenuie5()函數簡單地定義了ie5menu的visibiliy屬性為隱藏。jumptoie5()函數實現滑鼠點擊右鍵菜單中的層時發生的事情，也就是執行選項，包括開啟視窗連結或者執行指令碼語句，有一點需要提醒的是不管是視窗連結或者指令碼語句，它們都等於url的值，例如：url="http://www.webjx.com",url="javascript:window.location='http://www.webjx.com';"或者url="javascript:history.back();"這些東西在jumptoie5函數中都可以執行。

　　既然本文講的是用css+javascript實現右鍵菜單，前面講到的都是javascript，好像還沒有涉及到css，不用著急，下面就要用css來定義右鍵菜單的樣式，否則這所謂的右鍵菜單就亂成一踏糊塗了。

　　首先看看ie5menu的樣式skin0和skin1(根據不同的瀏覽器調用不同的皮膚)，為了使“彈出”的右鍵菜單更具真實性，這裡我們要類比真實右鍵菜單的樣式，請看下面的樣式代碼：

body {
font-family: "宋體";
font-size: 12px;
}

/*定義菜單方框的樣式1*/
.skin0 {
position:absolute;
padding-top:4px;
text-align:left;
width:100px; /*寬度，可以根據實際的功能表項目名稱的長度進行適當地調整*/
border:2px solid black;
background-color:menu; /*菜單的背景顏色方案，這裡選擇了系統預設的菜單顏色*/
font-family:"宋體";
line-height:20px;
cursor:default;
visibility:hidden; /*初始時，設定為不可見*/
}

/*定義菜單方框的樣式2*/
.skin1 {
padding-top:4px;
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: "宋體";
font-size: 10pt;
width:100px; /*寬度，可以根據實際的功能表項目名稱的長度進行適當地調整*/
background-color:menu; /*菜單的背景顏色方案，這裡選擇了系統預設的菜單顏色*/
border:1 solid buttonface;
visibility:hidden; /*初始時，設定為不可見*/
border:2 outset buttonhighlight;
}

/*定義菜單條的顯示樣式*/
.menuitems {
padding:2px 1px 2px 10px;
}
-->

　　上面的樣式定義非常簡單，但其屬性值則是經過仔細調試而得到的，使其顯示的結果盡量接近真實的右鍵菜單。

　　ok，所有的工作都做得差不多了，現在我們把上面講的東西趕快組合起來看看實實在在的效果吧。

　　效果預覽：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>超酷網頁右鍵菜單</title><style>body {font-family: "宋體";font-size: 12px;margin-left: 0px;margin-top: 10px;margin-right: 0px;margin-bottom: 0px;}/*定義菜單方框的樣式1*/.skin0 {position:absolute;padding-top:4px;text-align:left;width:100px; /*寬度，可以根據實際的功能表項目名稱的長度進行適當地調整*/border:2px solid black;background-color:menu; /*菜單的背景顏色方案，這裡選擇了系統預設的菜單顏色*/font-family:"宋體";line-height:20px;cursor:default;visibility:hidden; /*初始時，設定為不可見*/}/*定義菜單方框的樣式2*/.skin1 {padding-top:4px;cursor:default;font:menutext;position:absolute;text-align:left;font-family: "宋體";font-size: 10pt;width:100px; /*寬度，可以根據實際的功能表項目名稱的長度進行適當地調整*/background-color:menu; /*菜單的背景顏色方案，這裡選擇了系統預設的菜單顏色*/border:1 solid buttonface;visibility:hidden; /*初始時，設定為不可見*/border:2 outset buttonhighlight;}/*定義菜單條的顯示樣式*/.menuitems {padding:2px 1px 2px 10px;}--></style><script language="javascript"><!-- //定義菜單顯示的外觀，可以從上面定義的2種格式中選擇其一var menuskin = "skin1"; //是否在瀏覽器視窗的狀態行中顯示功能表項目條對應的連結字串var display_url = 0; function showmenuie5() {//擷取當前滑鼠右鍵按下後的位置，據此定義菜單顯示的位置var rightedge = document.body.clientWidth-event.clientX;var bottomedge = document.body.clientHeight-event.clientY;//如果從滑鼠位置到視窗右邊的空間小於菜單的寬度，就定位菜單的左座標（Left）為當前滑鼠位置向左一個菜單寬度if (rightedge <ie5menu.offsetWidth)ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;else//否則，就定位菜單的左座標為當前滑鼠位置ie5menu.style.left = document.body.scrollLeft + event.clientX;//如果從滑鼠位置到視窗下邊的空間小於菜單的高度，就定位菜單的上座標（Top）為當前滑鼠位置向上一個菜單高度if (bottomedge <ie5menu.offsetHeight)ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;else//否則，就定位菜單的上座標為當前滑鼠位置ie5menu.style.top = document.body.scrollTop + event.clientY;//設定菜單可見ie5menu.style.visibility = "visible";return false;}function hidemenuie5() {//隱藏菜單//很簡單，設定visibility為hidden就OK！ie5menu.style.visibility = "hidden";}function highlightie5() {//高亮度滑鼠經過的菜單條項目//如果滑鼠經過的對象是menuitems，就重新設定背景色與前景色彩//event.srcElement.className表示事件來自對象的名稱，必須首先判斷這個值，這很重要！if (event.srcElement.className == "menuitems") {event.srcElement.style.backgroundColor = "highlight";event.srcElement.style.color = "white";//將連結資訊顯示到狀態行//event.srcElement.url表示事件來自對象表示的連結URLif (display_url)window.status = event.srcElement.url; }}function lowlightie5() {//恢複菜單條項目的正常顯示if (event.srcElement.className == "menuitems") {event.srcElement.style.backgroundColor = "";event.srcElement.style.color = "black";window.status = ""; }}//右鍵下拉式功能表功能跳轉function jumptoie5() {//轉到新的連結位置var seltext=window.document.selection.createRange().textif (event.srcElement.className == "menuitems") {//如果存在開啟連結的目標視窗，就在那個視窗中開啟連結if (event.srcElement.getAttribute("target") != null)window.open(event.srcElement.url, event.srcElement.getAttribute("target"));else//否則，在當前視窗開啟連結window.location = event.srcElement.url; }}//--></script></head><body><center> <p>點擊右鍵看看效果-<a href="http://www.webjx.com/" target="_blank">網頁教學網</a></p></center><div id="ie5menu" class="skin0" ><div class="menuitems" url="javascript:history.back();">後退</div><div class="menuitems" url="javascript:history.forward();">前進</div><hr><div class="menuitems" url="http://www.webjx.com/" target="_blank">網頁教學</div><div class="menuitems" url="http://www.webjx.com/htmldata/sort/4.html" target="_blank">動畫製作</div><div class="menuitems" url="http://www.webjx.com/htmldata/sort/6.html" target="_blank">網路編程</div><div class="menuitems" url="http://www.webjx.com/htmldata/sort/8.html" target="_blank">網頁素材</div><hr><div class="menuitems" url="http://www.webjx.com/htmldata/sort/15.html" target="_blank">視頻教程</div><div class="menuitems" url="http://www.webjx.com/htmldata/sort/5.html" target="_blank">網頁特效</div><hr><div class="menuitems" url="http://www.webjx.com/aboutus.htm" target="_blank">關於本站</div><div class="menuitems" url="mailto:tslxg@hotmail.com">聯絡我們</div></div></body></html><script language="JavaScript1.2">//如果當前瀏覽器是Internet Explorer，document.all就返回真if (document.all && window.print) {//選擇菜單方塊的顯示樣式ie5menu.className = menuskin;//重新導向滑鼠右鍵事件的處理過程為自訂程式showmenuie5document.oncontextmenu = showmenuie5;//重新導向滑鼠左鍵事件的處理過程為自訂程式hidemenuie5document.body.onclick = hidemenuie5;}</script>

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

　　感謝天極網！