Javascript context (right click) menu

yuva · #1 (**permalink**) 03-04-2009, 08:10 PM

Overview

There are many of context menu examples on the internet. This javascript context menu is very lightweight, OOP based and item-specific. You can setup it in a few seconds.

Include the script and the style sheet at the top of your code (you can find the code in the source code section of this page). Do it in <head> tag. After loading the script you can write your code to attach context menu.

Javascript context menu code tested in IE5.5+, FF1.0+.

Source code for index.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>My project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="webtoolkit.contextmenu.css" />
    <script type="text/javascript" src="webtoolkit.contextmenu.js"></script>
    <script type="text/javascript">
        SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});
        SimpleContextMenu.attach('container', 'CM1');
    </script>
</head>
<body>
    <ul id="CM1" class="SimpleContextMenu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
 
    <input type="text" name="field" value="" />
    <div class="container">Cointainer1</div>
    <div class="container">Cointainer2</div>
    <div class="container">Cointainer3</div>
</body>
</html>

Source code for webtoolkit.contextmenu.css

Code:

ul.SimpleContextMenu {
    display: none;
    position: absolute;
    margin: 0px;
    padding: 0px;
    font-family: verdana;
    font-size: 12px;
    list-style-type: none;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
 
    ul.SimpleContextMenu li {
        border-bottom: 1px solid #000000;
    }
 
        ul.SimpleContextMenu li a {
            display: block;
            width: 100px;
            padding: 2px 10px 3px 10px;
            text-decoration: none;
            color: #ff0000;
            background: #eeeeee;
        }
 
        ul.SimpleContextMenu li a:hover {
            text-decoration: none;
            color: #ffffff;
            background: #ff0000;
        }

yuva · #2 (**permalink**) 03-04-2009, 08:11 PM

Source code for webtoolkit.contextmenu.js

Code:

/**
*
*  Simple Context Menu
*  http://www.webtoolkit.info/
*
**/
 
var SimpleContextMenu = {
 
    // private attributes
    _menus : new Array,
    _attachedElement : null,
    _menuElement : null,
    _preventDefault : true,
    _preventForms : true,
 
 
    // public method. Sets up whole context menu stuff..
    setup : function (conf) {
 
        if ( document.all && document.getElementById && !window.opera ) {
            SimpleContextMenu.IE = true;
        }
 
        if ( !document.all && document.getElementById && !window.opera ) {
            SimpleContextMenu.FF = true;
        }
 
        if ( document.all && document.getElementById && window.opera ) {
            SimpleContextMenu.OP = true;
        }
 
        if ( SimpleContextMenu.IE || SimpleContextMenu.FF ) {
 
            document.oncontextmenu = SimpleContextMenu._show;
            document.onclick = SimpleContextMenu._hide;
 
            if (conf && typeof(conf.preventDefault) != "undefined") {
                SimpleContextMenu._preventDefault = conf.preventDefault;
            }
 
            if (conf && typeof(conf.preventForms) != "undefined") {
                SimpleContextMenu._preventForms = conf.preventForms;
            }
 
        }
 
    },
 
 
    // public method. Attaches context menus to specific class names
    attach : function (classNames, menuId) {
 
        if (typeof(classNames) == "string") {
            SimpleContextMenu._menus[classNames] = menuId;
        }
 
        if (typeof(classNames) == "object") {
            for (x = 0; x < classNames.length; x++) {
                SimpleContextMenu._menus[classNames[x]] = menuId;
            }
        }
 
    },
 
 
    // private method. Get which context menu to show
    _getMenuElementId : function (e) {
 
        if (SimpleContextMenu.IE) {
            SimpleContextMenu._attachedElement = event.srcElement;
        } else {
            SimpleContextMenu._attachedElement = e.target;
        }
 
        while(SimpleContextMenu._attachedElement != null) {
            var className = SimpleContextMenu._attachedElement.className;
 
            if (typeof(className) != "undefined") {
                className = className.replace(/^\s+/g, "").replace(/\s+$/g, "")
                var classArray = className.split(/[ ]+/g);
 
                for (i = 0; i < classArray.length; i++) {
                    if (SimpleContextMenu._menus[classArray[i]]) {
                        return SimpleContextMenu._menus[classArray[i]];
                    }
                }
            }
 
            if (SimpleContextMenu.IE) {
                SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentElement;
            } else {
                SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentNode;
            }
        }
 
        return null;
 
    },

See Reply below for Remaining Code

yuva · #3 (**permalink**) 03-04-2009, 08:12 PM

Code:

    
     // private method. Shows context menu
     _getReturnValue : function (e) {
  
         var returnValue = true;
         var evt = SimpleContextMenu.IE ? window.event : e;
  
         if (evt.button != 1) {
             if (evt.target) {
                 var el = evt.target;
             } else if (evt.srcElement) {
                 var el = evt.srcElement;
             }
  
             var tname = el.tagName.toLowerCase();
  
             if ((tname == "input" || tname == "textarea")) {
                 if (!SimpleContextMenu._preventForms) {
                     returnValue = true;
                 } else {
                     returnValue = false;
                 }
             } else {
                 if (!SimpleContextMenu._preventDefault) {
                     returnValue = true;
                 } else {
                     returnValue = false;
                 }
             }
         }
  
         return returnValue;
  
     },
// private method. Shows context menu
     _show : function (e) {
  
         SimpleContextMenu._hide();
         var menuElementId = SimpleContextMenu._getMenuElementId(e);
  
         if (menuElementId) {
             var m = SimpleContextMenu._getMousePosition(e);
             var s = SimpleContextMenu._getScrollPosition(e);
  
             SimpleContextMenu._menuElement = document.getElementById(menuElementId);
             SimpleContextMenu._menuElement.style.left = m.x + s.x + 'px';
             SimpleContextMenu._menuElement.style.top = m.y + s.y + 'px';
             SimpleContextMenu._menuElement.style.display = 'block';
             return false;
         }
  
         return SimpleContextMenu._getReturnValue(e);
  
     },

Check the Reply for Remaining Code

yuva · #4 (**permalink**) 03-04-2009, 08:13 PM

Code:

     // private method. Hides context menu
     _hide : function () {
  
         if (SimpleContextMenu._menuElement) {
             SimpleContextMenu._menuElement.style.display = 'none';
         }
  
     },
  
  
     // private method. Returns mouse position
     _getMousePosition : function (e) {
  
         e = e ? e : window.event;
         var position = {
             'x' : e.clientX,
             'y' : e.clientY
         }
  
         return position;
  
     },
  
  
     // private method. Get document scroll position
     _getScrollPosition : function () {
  
         var x = 0;
         var y = 0;
  
         if( typeof( window.pageYOffset ) == 'number' ) {
             x = window.pageXOffset;
             y = window.pageYOffset;
         } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
             x = document.documentElement.scrollLeft;
             y = document.documentElement.scrollTop;
         } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
             x = document.body.scrollLeft;
             y = document.body.scrollTop;
         }
  
         var position = {
             'x' : x,
             'y' : y
         }
  
         return position;
  
     }
  
 }