< style >
< !--
/*定義菜單方框的樣式1*/
.skin0 {
position:absolute;
text-align:left;
width:200px; /*寬度，可以根據(jù)實際的菜單項目名稱的長度進(jìn)行適當(dāng)?shù)卣{(diào)整*/
border:2px solid black;
background-color:menu; /*菜單的背景顏色方案，這里選擇了系統(tǒng)默認(rèn)的菜單顏色*/
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden; /*初始時，設(shè)置為不可見*/
}
/*定義菜單方框的樣式2*/
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:200px; /*寬度，可以根據(jù)實際的菜單項目名稱的長度進(jìn)行適當(dāng)?shù)卣{(diào)整*/
background-color:menu; /*菜單的背景顏色方案，這里選擇了系統(tǒng)默認(rèn)的菜單顏色*/
border:1 solid buttonface;
visibility:hidden; /*初始時，設(shè)置為不可見*/
border:2 outset buttonhighlight;
}
/*定義菜單條的顯示樣式*/
.menuitems {
padding-left:15px; /*左間距*/
padding-right:10px; /*右間距*/
}
-- >
< /style >
< SCRIPT LANGUAGE="JavaScript1.2" >
< !--
//定義菜單顯示的外觀，可以從上面定義的2種格式中選擇其一
var menuskin = "skin1";
//是否在瀏覽器窗口的狀態(tài)行中顯示菜單項目條對應(yīng)的鏈接字符串
var display_url = 0;
<b>function showmenuie5() {</b>
//顯示菜單
//獲取當(dāng)前鼠標(biāo)右鍵按下后的位置，據(jù)此定義菜單顯示的位置
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
//如果從鼠標(biāo)位置到窗口右邊的空間小于菜單的寬度，就定位菜單的左坐標(biāo)（Left）
為當(dāng)前鼠標(biāo)位置向左一個菜單寬度
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft event.clientX - ie5menu.offsetWidth;
else
//否則，就定位菜單的左坐標(biāo)為當(dāng)前鼠標(biāo)位置
ie5menu.style.left = document.body.scrollLeft event.clientX;
//如果從鼠標(biāo)位置到窗口下邊的空間小于菜單的高度，就定位菜單的上坐標(biāo)（Top）
為當(dāng)前鼠標(biāo)位置向上一個菜單高度
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop event.clientY - ie5menu.offsetHeight;
else
//否則，就定位菜單的上坐標(biāo)為當(dāng)前鼠標(biāo)位置
ie5menu.style.top = document.body.scrollTop event.clientY;
//設(shè)置菜單可見
ie5menu.style.visibility = "visible";
return false;
}</pre>
<p><pre >
<b>function hidemenuie5() </b>{
//隱藏菜單
//很簡單，設(shè)置visibility為hidden就OK！
ie5menu.style.visibility = "hidden";
}
<b>function highlightie5() </b>{
//高亮度鼠標(biāo)經(jīng)過的菜單條項目
//如果鼠標(biāo)經(jīng)過的對象是menuitems，就重新設(shè)置背景色與前景色
//event.srcElement.className表示事件來自對象的名稱，必須首先判斷這個值，這很重要！
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
//將鏈接信息顯示到狀態(tài)行
//event.srcElement.url表示事件來自對象表示的鏈接URL
if (display_url)
window.status = event.srcElement.url;
}
}
<b>function lowlightie5() </b>{
//恢復(fù)菜單條項目的正常顯示
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
<b>function jumptoie5() </b>{
//轉(zhuǎn)到新的鏈接位置
if (event.srcElement.className == "menuitems") {
//如果存在打開鏈接的目標(biāo)窗口，就在那個窗口中打開鏈接
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
//否則，在當(dāng)前窗口打開鏈接
window.location = event.srcElement.url;
}
}
// End -- >
< /script >
< /HEAD >
< BODY >
< center >< h3 >在空白處點(diǎn)擊鼠標(biāo)右鍵，猜猜會看到什么 ？< /h3 >< /center >< br >< br >
//定義菜單方框?qū)觟e5ment，并定義其顯示樣式以及相關(guān)的3個監(jiān)測事件
< div onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();" >
//定義其中的菜單條項目
//根據(jù)你的需要，在這里添加其他的菜單條名稱以及相應(yīng)的鏈接URL
< div url="javascript:history.back();" >后退< /div >
< div url="javascript:history.forward();" >前進(jìn)< /div >
< hr >
< div url="builder/" >ChinaByte網(wǎng)絡(luò)學(xué)院< /div >
< div url="column/" >ChinaByte專欄天地< /div >
< /div >
//頁面加載后，首先執(zhí)行的初始化腳本程序
< script language="JavaScript1.2" >
//如果當(dāng)前瀏覽器是Internet Explorer，document.all就返回真
if (document.all && window.print) {
//選擇菜單方塊的顯示樣式
ie5menu.className = menuskin;
//重定向鼠標(biāo)右鍵事件的處理過程為自定義程序showmenuie5
document.oncontextmenu = showmenuie5;
//重定向鼠標(biāo)左鍵事件的處理過程為自定義程序hidemenuie5
document.body.onclick = hidemenuie5;
}
< /script >
< /body>< /html>
</pre>
<P> <b>演示效果</b></p>
<P> OK！看了上面代碼的詳細(xì)解讀，你是否領(lǐng)會了其中的技巧？軟件真是無所不能，是嗎？</p>
<P> 想要看看到底是怎樣的神**果嗎？不要猶豫，請點(diǎn)擊<a href="builder/download/gdemo.htm" target="_blank">這里</a>！</p>
網(wǎng)頁知識:自定義右鍵菜單代碼詳解，與大家多多交流。
