Inside Technique : Custom Context Menus using DHTML and XML : Scripting your Context Menu

The context menu uses a style sheet, a fairly detailed script, and a short snippet of HTML. First, let's look at the style sheet. The style sheet definition allows you to customize the appearance of the context menu. Below is the default style sheet used in our demonstration:

<style>
  .menu{ cursor: default; 
         display: none; 
         position: absolute; 
         top: 0; left: 0; 
         overflow: hidden;
         
         background-color: "#CFCFCF"; 
         border: "1 solid"; 
         border-top-color: "#EFEFEF"; 
         border-left-color: "#EFEFEF"; 
         border-right-color: "#505050"; 
         border-bottom-color: "#505050"; 
         font: 8pt Arial;
         margin:0pt;padding: 3pt
  }

  .menu SPAN {width: 100%; 
         cursor: default;
         padding-left: 10pt}
	

   .menu SPAN.selected {background: navy; 
         color:white}
</style>

The menu class rule defines the overall appearance of the context menu. You can customize the appearance starting with the background-color property. The next rule allows you to customize the appearance of each individual menu-item. You should not change the width but the rest of the attributes can be customized. The last style rule defines the appearance of selected items. This rule can be freely customized.

Next, you need to include the context menu script on your web-page. The complete script is listed below. The last function, fnFireContext, is the only one you need to modify. This script is a heavily modified version of the script originally presented on Microsoft's MSDN Site.

<SCRIPT>
// Define global script variables
var bContextKey=false;

// The fnDetermine function performs most of the work

function fnGetContextID(el) {
  while (el!=null) {
    if (el.contextmenu) return el.contextmenu
    el = el.parentElement
  }
  return ""
}

function fnDetermine(){
  oWorkItem=event.srcElement;

  // Proceed if the desired keyboard key is pressed.
  if(bContextKey==true){
    // If the menu STATUS is false, continue.
    if(oContextMenu.getAttribute("status")=="false"){
      // Give the menu mouse capture so it can interact better with the page.
      oContextMenu.setCapture();

      // Relocate the menu to an offset from the mouse position.
      oContextMenu.style.top=event.clientY + document.body.scrollTop + 1;
      oContextMenu.style.left=event.clientX + document.body.scrollLeft +  1;

      oContextMenu.innerHTML="";
      // Set its STATUS to true.
      var sContext = fnGetContextID(event.srcElement)
      if (sContext!="") {
        fnPopulate(sContext)
        oContextMenu.setAttribute("status","true");
        event.returnValue=false;
      }
      else
        event.returnValue=true
    }
  }
  else{
    // If the keyboard key was not pressed and the menu status is true, continue.
    if(oContextMenu.getAttribute("status")=="true"){
      if((oWorkItem.parentElement.id=="oContextMenu") &&
        (oWorkItem.getAttribute("component")=="menuitem")){
        fnFireContext(oWorkItem)
      }

      // Reset the context menu, release mouse capture, and hide it.  
      oContextMenu.style.display="none";
      oContextMenu.setAttribute("status","false");
      oContextMenu.releaseCapture();
      oContextMenu.innerHTML="";
      event.returnValue=false;
    }
  }
}
    

function fnPopulate(sID) {
  var str=""
  var elMenuRoot = document.all.contextDef.XMLDocument.
childNodes(0).selectSingleNode('contextmenu[@id="' + sID + '"]')
  if (elMenuRoot) {
    for(var i=0;i<elMenuRoot.childNodes.length;i++)
      str+='<span component="menuitem" menuid="' + 
            elMenuRoot.childNodes[i].getAttribute("id") + 
            '" id=oMenuItem' + i + '>' +  
            elMenuRoot.childNodes[i].getAttribute("value") + 
            "</SPAN><BR>"
    oContextMenu.innerHTML=str;
    oContextMenu.style.display="block";
    oContextMenu.style.pixelHeight = oContextMenu.scrollHeight    
  }
}

function fnChirpOn(){
  if((event.clientX>0) &&
     (event.clientY>0) &&
     (event.clientX<document.body.offsetWidth) &&
     (event.clientY<document.body.offsetHeight)){
    oWorkItem=event.srcElement;
    if(oWorkItem.getAttribute("component")=="menuitem"){
      oWorkItem.className = "selected"
    }
  }
}
function fnChirpOff(){
  if((event.clientX>0) &&
     (event.clientY>0) &&
     (event.clientX<document.body.offsetWidth) &&
    (event.clientY<document.body.offsetHeight)){
    oWorkItem=event.srcElement;
    if(oWorkItem.getAttribute("component")=="menuitem"){
      oWorkItem.className = ""
    }
  }
}

function fnInit(){
  if (oContextMenu) {
    oContextMenu.style.width=110;
    oContextMenu.style.height=document.body.offsetHeight/2;
    oContextMenu.style.zIndex=2;
    // Setup the basic styles of the context menu.
    document.oncontextmenu=fnSuppress;
  }
}

function fnInContext(el) {
  while (el!=null) {
    if (el.id=="oContextMenu") return true
    el = el.offsetParent
  }
  return false
}

function fnSuppress(){
  if (!(fnInContext(event.srcElement))) { 
    oContextMenu.style.display="none";
    oContextMenu.setAttribute("status","false");
    oContextMenu.releaseCapture();
    bContextKey=true;
  }

  fnDetermine();
  bContextKey=false;
}

function fnFireContext(oItem) {
  // Customize this function based on your context menu
  switch (oItem.menuid) {
    case "viewsource":
      location.href = "view-source:" + location.href
      break;
    case "back":
      history.back()
      break;
    default:
      alert("Selected:\nID: " + oItem.menuid)
  }
}
</SCRIPT>

The last step is to include the event initialization on the BODY element and include the HTML snippet that defines the context menu. This should be included exactly as shown below:

<BODY 
    onload="fnInit()" 
    onclick="fnDetermine()">
  <div status="false" 
    onmouseover="fnChirpOn()" 
    onmouseout="fnChirpOff()" 
    id="oContextMenu" 
    class="menu">
  </div>
... your contents ...

That's it! You have now seen how to create a custom context menu.

Disabling Context Menus

If all you want to do is disable the context menus, you do not need this code. Instead, simply include the following function on your web-page:

<BODY ONCONTEXTMENU = "return false">

If you want to define custom context menus for a few items and hide the context menu for all others, simply use the technique as described and add the following attribute to your body tag (do not define this context menu in your XML):

<BODY contextmenu="_blank">

Enhancing the Context Menu Script

This script does not address how to handle disabled context menu items, add horizontal rules or display nested menus. We leave that as an exercise for you. If you do want to add these extensions, I suggest you use the XML data-island to continue defining the menu and just enhance the fnPopulate and fnDetermine functions. For example, to add a disabled item you can simply add a new attribute to the XML item element called disabled='true'. When specified, you render the element disabled.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.