Inside Technique : Custom Context Menus using DHTML and XML
By Scott Isaacs

Context menus are commands that are displayed when the user right-clicks on your web-page. Microsoft's MSDN has a simple tutorial demonstrating how you can create your own custom context menus. In this article, we heavily modified their sample code to provide a framework for quickly defining your own context menus through an XML data-island. An XML data-island is a fragment of XML data that lives within your HTML document. By using the XML document object model (DOM) we can easily reference and manipulate the XML contents. In this article, we use the XML Data Island to store multiple context menu definitions. Any one of these definitions can be associated with any element in your document by simply adding a special attribute to the element. If no custom definition exists, the default context menu is displayed.

Context Menu and XML Data Island support was first introduced in Internet Explorer 5.0. We implemented our demo to automatically ignore all browsers except Internet Explorer 5.0 or later. Therefore, if you are not using Internet Explorer 5.0 or later none of the demos will work, the code will basically do nothing, and you will see the browser's default context menu. To try a custom context menu (if you are running IE 5.0 or later), right-click on this paragraph.

The code is intelligent and when no context menu is defined the standard one is displayed. If you right-click on this paragraph, you will see the browser's default context menu. On the next page, we explain how our script and the XML data-island works.

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