上下文菜單就是用戶在頁面上單擊右鍵時所顯示的一組命令。微軟的MSDN有一個簡單的例子說明了怎樣建立自定義菜單。這裡，我們將通過XML的數據島來快速創建自定義的上下文菜單。XML數據島就是存在於HTML文檔中的XML數據的一部分。通過XML文檔對象模型[XML document object model (DOM)]，我們可以輕松地參考和引用XML裡的內容。我們這裡利用XML數據島來存儲上下文菜單的多個定義，其中的每一個定義都可以和文檔中的任一元素相聯系。在沒有定義的地方，將顯示默認的菜單。
Internet Explorer 5.0首次提出對上下文菜單和數據島的支持，我們的例子在除Internet Explorer 5.0及以上的浏覽器裡將自動被忽略。因此，如果你使用的浏覽器不是Internet Explorer 5.0及以上的版本，你將看不到任何效果，只能看到浏覽器的默認菜單。如果你使用的是Internet Explorer 5.0及以上的浏覽器，你可以在頁面上點擊鼠標右鍵來看效果。注意：點擊圖象和文字將顯示不同的菜單。下面我們進行分析：
第一步：定義菜單
定義菜單是在文檔XML數據島裡的進行的，你只需簡單地在HTML文檔的HEAD部分包含XML文件即可。例如：可以定義如下：
<xml id="contextDef">
<xmldata>
<contextmenu id="demo">
<item id="viewsource" value="查看源文件"/>
<item id="back" value="返回上頁"/>
</contextmenu>
<contextmenu id="demob">
<item id="menu1" value="菜單項１" />
<item id="menu2" value="菜單項２" />
</contextmenu>
</xmldata>
</xml>
在這裡，帶ID屬性的<xml>根節點和<xmldata>節點是必須的[注意：在XML裡大小寫是敏感的]。一個contextmenu節點和它所包含的多個item節點定義了一個菜單。如果你要定義多個菜單，你只需定義多個contextmenu節點即可。contextmenu節點的id屬性和頁面中的相應元素相關聯，item節點的id屬性標明哪一個菜單項被我們選取。值得注意的是：在整個XML文檔裡，所有的ID屬性不能重名。item節點的value值就是要在菜單裡要顯示的文字。
第二步：和HTML裡的元素相關聯
在上面的XML數據島裡，我們定義了兩個菜單demo和demob，要想和HTML裡的元素相關聯，只需簡單地把contextmenu的ID值和HTML元素的contextmenu屬性相連接即可。
<P contextmenu="demo">這個段落顯示demo菜單的內容</P>
<IMG SRC="usedemob.gif" contextmenu="demob">
第三步：編寫點擊菜單項的執行的操作
當我們單擊菜單的每一個選項時，函數fnFireContext就被調用，並把代表所選菜單的一個對象參數傳過來。為了處理單擊的事件，只需編寫簡單的switch語句，根據不同的ID值執行不同的操作。例如：
function fnFireContext(oItem) {
switch (oItem.menuid) {
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
default:
alert("您選的是:\n" + oItem.menuid + "\nText: " +
oItem.innerText)
}
}
你可以根據自己的需要進行更改鼠標單擊事件的操作。
第四步：定義菜單外觀
定義外觀只需使用樣式單即可，下面我們給出完整的例子，你完全可以拷貝、粘貼來看到本例子的效果！！[注意：浏覽器必需是IE5+]。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.menu{ cursor: hand;
display: none;
position: absolute;