Popup Menu

IE5 introduced a new event called oncontextmenu and this is called before the context menu is shown allowing the author to create his own menu. Once the event occurs all you have to do is to find the position where the mouse pointer is positioned and then show a menu at that point.

First you have to include the javascript and style sheet files.

<link type="text/css" rel="stylesheet" href="menu.css">
<script type="text/javascript" src="menu3.js"></script>

Note that you also need the file menuContainer.html in the same directory (or you have to change the path inside menu3.js) as the current page and that menuContainer.html also needs to be in the same directory as menu.css (or you'll have to change this file as well).

Below is the table that defines the popup menu

<table cellspacing="0" class="menu" id="popupMenu">
<tr id="anchorItem">
   <td></td>
   <td>Open link</td>
   <td></td>
</tr>
<tr class="disabled" id="anchorSeparator">
   <td colspan="3" style="height: 10px; padding: 0;">
   <div style="border: 1px inset ; height: 2; overflow: hidden;">
   </div></td>
</tr>
<tr href="javascript:history.back()">
   <td class="icon"><img src="../../images/arrowleft.gif"></td>
   <td>Back</td>
   <td></td>
</tr>
<tr href="javascript:history.forward()">
   <td class="icon"><img src="../../images/arrowright.gif"></td>
   <td>Forward</td>
   <td></td>
</tr>
<tr href="/index.htm">
   <td class="icon"><img src="../../images/favicon.gif"></td>
   <td style="font-weight: bold;">WebFX Home</td>
   <td></td>
</tr>
<tr class="disabled">
   <td colspan="3" style="height: 10px; padding: 0;">
   <div style="border: 1px inset ; height: 2; overflow: hidden;">
   </div></td>
</tr>
<tr id="sourceItem">
   <td class="icon"><img src="../../images/notepad.gif"></td>
   <td>View Source</td>
   <td></td>
</tr>
</table>

	Open link
	Back
	Forward
	WebFX Home
	View Source

Then we need to define a function to call when the event fires and assign this as an event handler.

function showPopupMenu() {
   customizePopup();
   hideAllMenuScriptlets();
   // Note how the Boundaries object is initiated
   showMenu(popupMenu, new Boundaries
   (event.clientX + document.body.scrollLeft, event.clientY +
   document.body.scrollTop));
   window.event.returnValue = false; // disable the standard popup
}

document.oncontextmenu = showPopupMenu;

I've also made the popup a bit dynamic. Every time the popup is called the function customizePopup is called and this checks whether the target element was an anchor and if so the anchorItem is made visible. This also shows how important it is to remember that the actual menu inside the scriptlet is not the same as the table that defined the menu. After the table has been changed the function forceRebuild is called.

function customizePopup() {
   sourceItem.href = "view-source:" + window.location;

   // Returns the first parent with the tagName A
   var aEl = getParent(event.srcElement, function(el) {return el.tagName == "A";});

   if (aEl == null) {
      anchorItem.style.display = "none";
      anchorSeparator.style.display = "none";
      forceRebuild(popupMenu);
   }
   else {
      anchorItem.style.display = "block";
      anchorSeparator.style.display = "block";
      forceRebuild(popupMenu);
   }
}

Next I will show you how to create a menu bar at the top and have an iframe below.