Making custom right-click context menus for my web-app

Question

I ve a few websites like google-docs and map-quest that have custom drop down menus when you right-click  Somehow they override the browser s behavior of drop-down menu  and I m now sure exactly how they do it  I found a jQuery plugin that does this  but I m still curious about a few things    How does this work  Is the browser s drop-down menu actually being overridden  or is the effect just simulated  If so  how  What does the plugin abstract away  What s going on behind the scenes  Is this the only way of achieving this effect      See several custom-context menus in action

User · Answer

here is an example for right click context menu in javascript: Right Click Context Menu

Used raw javasScript Code for context menu functionality. Can you please check this, hope this will help you.

Live Code:

_x000D_

(function() {_x000D_
  _x000D_
  "use strict";_x000D_
_x000D_
_x000D_
  /*********************************************** Context Menu Function Only ********************************/_x000D_
  function clickInsideElement( e, className ) {_x000D_
    var el = e.srcElement || e.target;_x000D_
    if ( el.classList.contains(className) ) {_x000D_
      return el;_x000D_
    } else {_x000D_
      while ( el = el.parentNode ) {_x000D_
        if ( el.classList && el.classList.contains(className) ) {_x000D_
          return el;_x000D_
        }_x000D_
      }_x000D_
    }_x000D_
    return false;_x000D_
  }_x000D_
_x000D_
  function getPosition(e) {_x000D_
    var posx = 0, posy = 0;_x000D_
    if (!e) var e = window.event;_x000D_
    if (e.pageX || e.pageY) {_x000D_
      posx = e.pageX;_x000D_
      posy = e.pageY;_x000D_
    } else if (e.clientX || e.clientY) {_x000D_
      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;_x000D_
      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;_x000D_
    }_x000D_
    return {_x000D_
      x: posx,_x000D_
      y: posy_x000D_
    }_x000D_
  }_x000D_
_x000D_
  // Your Menu Class Name_x000D_
  var taskItemClassName = "thumb";_x000D_
  var contextMenuClassName = "context-menu",contextMenuItemClassName = "context-menu__item",contextMenuLinkClassName = "context-menu__link", contextMenuActive = "context-menu--active";_x000D_
  var taskItemInContext, clickCoords, clickCoordsX, clickCoordsY, menu = document.querySelector("#context-menu"), menuItems = menu.querySelectorAll(".context-menu__item");_x000D_
  var menuState = 0, menuWidth, menuHeight, menuPosition, menuPositionX, menuPositionY, windowWidth, windowHeight;_x000D_
_x000D_
  function initMenuFunction() {_x000D_
    contextListener();_x000D_
    clickListener();_x000D_
    keyupListener();_x000D_
    resizeListener();_x000D_
  }_x000D_
_x000D_
  /**_x000D_
   * Listens for contextmenu events._x000D_
   */_x000D_
  function contextListener() {_x000D_
    document.addEventListener( "contextmenu", function(e) {_x000D_
      taskItemInContext = clickInsideElement( e, taskItemClassName );_x000D_
_x000D_
      if ( taskItemInContext ) {_x000D_
        e.preventDefault();_x000D_
        toggleMenuOn();_x000D_
        positionMenu(e);_x000D_
      } else {_x000D_
        taskItemInContext = null;_x000D_
        toggleMenuOff();_x000D_
      }_x000D_
    });_x000D_
  }_x000D_
_x000D_
  /**_x000D_
   * Listens for click events._x000D_
   */_x000D_
  function clickListener() {_x000D_
    document.addEventListener( "click", function(e) {_x000D_
      var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName );_x000D_
_x000D_
      if ( clickeElIsLink ) {_x000D_
        e.preventDefault();_x000D_
        menuItemListener( clickeElIsLink );_x000D_
      } else {_x000D_
        var button = e.which || e.button;_x000D_
        if ( button === 1 ) {_x000D_
          toggleMenuOff();_x000D_
        }_x000D_
      }_x000D_
    });_x000D_
  }_x000D_
_x000D_
  /**_x000D_
   * Listens for keyup events._x000D_
   */_x000D_
  function keyupListener() {_x000D_
    window.onkeyup = function(e) {_x000D_
      if ( e.keyCode === 27 ) {_x000D_
        toggleMenuOff();_x000D_
      }_x000D_
    }_x000D_
  }_x000D_
_x000D_
  /**_x000D_
   * Window resize event listener_x000D_
   */_x000D_
  function resizeListener() {_x000D_
    window.onresize = function(e) {_x000D_
      toggleMenuOff();_x000D_
    };_x000D_
  }_x000D_
_x000D_
  /**_x000D_
   * Turns the custom context menu on._x000D_
   */_x000D_
  function toggleMenuOn() {_x000D_
    if ( menuState !== 1 ) {_x000D_
      menuState = 1;_x000D_
      menu.classList.add( contextMenuActive );_x000D_
    }_x000D_
  }_x000D_
_x000D_
  /**_x000D_
   * Turns the custom context menu off._x000D_
   */_x000D_
  function toggleMenuOff() {_x000D_
    if ( menuState !== 0 ) {_x000D_
      menuState = 0;_x000D_
      menu.classList.remove( contextMenuActive );_x000D_
    }_x000D_
  }_x000D_
_x000D_
  function positionMenu(e) {_x000D_
    clickCoords = getPosition(e);_x000D_
    clickCoordsX = clickCoords.x;_x000D_
    clickCoordsY = clickCoords.y;_x000D_
    menuWidth = menu.offsetWidth + 4;_x000D_
    menuHeight = menu.offsetHeight + 4;_x000D_
_x000D_
    windowWidth = window.innerWidth;_x000D_
    windowHeight = window.innerHeight;_x000D_
_x000D_
    if ( (windowWidth - clickCoordsX) < menuWidth ) {_x000D_
      menu.style.left = (windowWidth - menuWidth)-0 + "px";_x000D_
    } else {_x000D_
      menu.style.left = clickCoordsX-0 + "px";_x000D_
    }_x000D_
_x000D_
    // menu.style.top = clickCoordsY + "px";_x000D_
_x000D_
    if ( Math.abs(windowHeight - clickCoordsY) < menuHeight ) {_x000D_
      menu.style.top = (windowHeight - menuHeight)-0 + "px";_x000D_
    } else {_x000D_
      menu.style.top = clickCoordsY-0 + "px";_x000D_
    }_x000D_
  }_x000D_
_x000D_
_x000D_
  function menuItemListener( link ) {_x000D_
    var menuSelectedPhotoId = taskItemInContext.getAttribute("data-id");_x000D_
    console.log('Your Selected Photo: '+menuSelectedPhotoId)_x000D_
    var moveToAlbumSelectedId = link.getAttribute("data-action");_x000D_
    if(moveToAlbumSelectedId == 'remove'){_x000D_
      console.log('You Clicked the remove button')_x000D_
    }else if(moveToAlbumSelectedId && moveToAlbumSelectedId.length > 7){_x000D_
      console.log('Clicked Album Name: '+moveToAlbumSelectedId);_x000D_
    }_x000D_
    toggleMenuOff();_x000D_
  }_x000D_
  initMenuFunction();_x000D_
_x000D_
})();

_x000D_

/* For Body Padding and content */_x000D_
body { padding-top: 70px; }_x000D_
li a { text-decoration: none !important; }_x000D_
_x000D_
/* Thumbnail only */_x000D_
.thumb {_x000D_
  margin-bottom: 30px;_x000D_
}_x000D_
.thumb:hover a, .thumb:active a, .thumb:focus a {_x000D_
  border: 1px solid purple;_x000D_
}_x000D_
_x000D_
/************** For Context menu ***********/_x000D_
/* context menu */_x000D_
.context-menu {  display: none;  position: absolute;  z-index: 9999;  padding: 12px 0;  width: 200px;  background-color: #fff;  border: solid 1px #dfdfdf;  box-shadow: 1px 1px 2px #cfcfcf;  }_x000D_
.context-menu--active {  display: block;  }_x000D_
_x000D_
.context-menu__items { list-style: none;  margin: 0;  padding: 0;  }_x000D_
.context-menu__item { display: block;  margin-bottom: 4px;  }_x000D_
.context-menu__item:last-child {  margin-bottom: 0;  }_x000D_
.context-menu__link {  display: block;  padding: 4px 12px;  color: #0066aa;  text-decoration: none;  }_x000D_
.context-menu__link:hover {  color: #fff;  background-color: #0066aa;  }_x000D_
.context-menu__items ul {  position: absolute;  white-space: nowrap;  z-index: 1;  left: -99999em;}_x000D_
.context-menu__items > li:hover > ul {  left: auto;  padding-top: 5px  ;  min-width: 100%;  }_x000D_
.context-menu__items > li li ul {  border-left:1px solid #fff;}_x000D_
.context-menu__items > li li:hover > ul {  left: 100%;  top: -1px;  }_x000D_
.context-menu__item ul { background-color: #ffffff; padding: 7px 11px;  list-style-type: none;  text-decoration: none; margin-left: 40px; }_x000D_
.page-media .context-menu__items ul li { display: block; }_x000D_
/************** For Context menu ***********/

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<body>_x000D_
_x000D_
_x000D_
_x000D_
    <!-- Page Content -->_x000D_
    <div class="container">_x000D_
_x000D_
        <div class="row">_x000D_
_x000D_
            <div class="col-lg-12">_x000D_
                <h1 class="page-header">Thumbnail Gallery <small>(Right click to see the context menu)</small></h1>_x000D_
            </div>_x000D_
_x000D_
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
                <a class="thumbnail" href="#">_x000D_
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
                </a>_x000D_
            </div>_x000D_
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
                <a class="thumbnail" href="#">_x000D_
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
                </a>_x000D_
            </div>_x000D_
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
                <a class="thumbnail" href="#">_x000D_
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
                </a>_x000D_
            </div>_x000D_
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
                <a class="thumbnail" href="#">_x000D_
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
                </a>_x000D_
            </div>_x000D_
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
                <a class="thumbnail" href="#">_x000D_
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
                </a>_x000D_
            </div>_x000D_
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
                <a class="thumbnail" href="#">_x000D_
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
                </a>_x000D_
            </div>_x000D_
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
                <a class="thumbnail" href="#">_x000D_
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
                </a>_x000D_
            </div>_x000D_
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">_x000D_
                <a class="thumbnail" href="#">_x000D_
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">_x000D_
                </a>_x000D_
            </div>_x000D_
_x000D_
        </div>_x000D_
_x000D_
        <hr>_x000D_
_x000D_
_x000D_
    </div>_x000D_
    <!-- /.container -->_x000D_
_x000D_
_x000D_
    <!-- / The Context Menu -->_x000D_
    <nav id="context-menu" class="context-menu">_x000D_
        <ul class="context-menu__items">_x000D_
            <li class="context-menu__item">_x000D_
                <a href="#" class="context-menu__link" data-action="Delete This Photo"><i class="fa fa-empire"></i> Delete This Photo</a>_x000D_
            </li>_x000D_
            <li class="context-menu__item">_x000D_
                <a href="#" class="context-menu__link" data-action="Photo Option 2"><i class="fa fa-envira"></i> Photo Option 2</a>_x000D_
            </li>_x000D_
            <li class="context-menu__item">_x000D_
                <a href="#" class="context-menu__link" data-action="Photo Option 3"><i class="fa fa-first-order"></i> Photo Option 3</a>_x000D_
            </li>_x000D_
            <li class="context-menu__item">_x000D_
                <a href="#" class="context-menu__link" data-action="Photo Option 4"><i class="fa fa-gitlab"></i> Photo Option 4</a>_x000D_
            </li>_x000D_
            <li class="context-menu__item">_x000D_
                <a href="#" class="context-menu__link" data-action="Photo Option 5"><i class="fa fa-ioxhost"></i> Photo Option 5</a>_x000D_
            </li>_x000D_
            <li class="context-menu__item">_x000D_
                <a href="#" class="context-menu__link"><i class="fa fa-arrow-right"></i> Add Photo to</a>_x000D_
                <ul>_x000D_
                    <li><a href="#!" class="context-menu__link" data-action="album-one"><i class="fa fa-camera-retro"></i> Album One</a></li>_x000D_
                    <li><a href="#!" class="context-menu__link" data-action="album-two"><i class="fa fa-camera-retro"></i> Album Two</a></li>_x000D_
                    <li><a href="#!" class="context-menu__link" data-action="album-three"><i class="fa fa-camera-retro"></i> Album Three</a></li>_x000D_
                    <li><a href="#!" class="context-menu__link" data-action="album-four"><i class="fa fa-camera-retro"></i> Album Four</a></li>_x000D_
                </ul>_x000D_
            </li>_x000D_
        </ul>_x000D_
    </nav>_x000D_
_x000D_
    <!-- End # Context Menu -->_x000D_
_x000D_
_x000D_
</body>

_x000D_

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D       lt title gt Right Click lt  title gt  x000D   x000D       lt link href  https   swisnl github io jQuery-contextMenu dist jquery contextMenu css  rel  stylesheet  type  text css    gt  x000D   x000D       lt script src  https   cdnjs cloudflare com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt  x000D       lt script src  https   swisnl github io jQuery-contextMenu dist jquery contextMenu js  type  text javascript  gt  lt  script gt  x000D   x000D       lt script src  https   swisnl github io jQuery-contextMenu dist jquery ui position min js  type  text javascript  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D       lt span class  context-menu-one  style  border solid 1px black  padding 5px   gt Right Click Me lt  span gt  x000D       lt script type  text javascript  gt  x000D           x000D            function     x000D            contextMenu   x000D              selector    context-menu-one    x000D              callback  function key  options    x000D                  var m    clicked      key  x000D                  window console  amp  amp  console log m     alert m    x000D                 x000D              items    x000D                   edit    name   Edit   icon   edit    x000D                   cut    name   Cut   icon   cut    x000D                 copy   name   Copy   icon   copy    x000D                   paste    name   Paste   icon   paste    x000D                   delete    name   Delete   icon   delete    x000D                   sep1    ---------   x000D                   quit    name   Quit   icon  function    x000D                      return  context-menu-icon context-menu-icon-quit   x000D                     x000D                x000D              x000D   x000D              context-menu-one   on  click   function e   x000D              console log  clicked   this   x000D                 x000D          x000D       lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can watch this tutorial  http   www youtube com watch v iDyEfKWCzhg Make sure the context menu is hidden at first and has a position of absolute  This will  ensure that there won t be multiple context menu and useless creation of context menu  The link to the page is placed in the description of the YouTube video     document  bind  contextmenu   function event       contextmenu   css   top   event pageY     px    left   event pageX     px    show          document  bind  click   function        contextmenu   hide

User · Answer

Simple One  show context menu when right click anywhere in document avoid context menu hide when click inside context menu close context menu when press left mouse button  Note  dont use display none instead use opacity to hide and show  x000D   x000D  var menu  document querySelector   context menu    document addEventListener  contextmenu   function e                      e preventDefault                  menu style position    absolute               menu style left   e pageX    px               menu style top   e pageY    px                        menu style opacity   1                        document addEventListener  click   function e     if e target closest   context menu      return        menu style opacity   0        x000D   context menu   width 70px  background lightgrey  padding 5px   opacity  0     context menu div  margin 5px  background grey      context menu div hover  margin 5px  background red     cursor pointer     x000D   lt div class  context menu  gt   lt div gt menu 1 lt  div gt   lt div gt menu 2 lt  div gt   lt  div gt  x000D   x000D   x000D   extra css  x000D   x000D  var menu  document querySelector   context menu    document addEventListener  contextmenu   function e                      e preventDefault                  menu style position    absolute               menu style left   e pageX    px               menu style top   e pageY    px                        menu style opacity   1                        document addEventListener  click   function e     if e target closest   context menu      return        menu style opacity   0        x000D   context menu   width 120px  background white  border 1px solid lightgrey    opacity  0     context menu div  padding 5px  padding-left 15px  margin 5px 2px  border-bottom 1px solid lightgrey     context menu div last-child   border none     context menu div hover   background lightgrey     cursor pointer     x000D   lt div class  context menu  gt   lt div gt menu 1 lt  div gt   lt div gt menu 2 lt  div gt   lt div gt menu 3 lt  div gt   lt div gt menu 4 lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

The browser s context menu is being overridden  There is no way to augment the native context menu in any major browser   Since the plugin is creating its own menu  the only part thats really being abstracted is the browser s context menu event  The plugin creates an html menu based on your configuration  then places that content at the location of your click   Yes  this is the only way to go about creating a custom context menu  Obviously  different plugins do things slightly different  but they will all override the browser s event and place their own html-based menu in the correct place

User · Answer

I have a nice and easy implementation using bootstrap as follows   lt select class  quot custom-select quot  id  quot list quot  multiple gt  lt  select gt    lt div class  quot dropdown-menu quot  id  quot menu-right-click quot  style  gt       lt h6 class  quot dropdown-header quot  gt Actions lt  h6 gt       lt a class  quot dropdown-item quot  href  quot  quot  onclick  quot option1    quot  gt Option 1 lt  a gt       lt a class  quot dropdown-item quot  href  quot  quot  onclick  quot option2    quot  gt Option 2 lt  a gt   lt  div gt    lt script gt         quot  menu-right-click quot   hide           document  on  quot contextmenu quot    quot  list quot   function  e               quot  menu-right-click quot                css                   position   absolute                   left  e pageX                  top  e pageY                  display   block                         return false               function option1                something you want               quot  menu-right-click quot   hide               function option2                something else             quot  menu-right-click quot   hide           lt  script gt

User · Answer

As Adrian said  the plugins are going to work the same way   There are three basic parts you re going to need   1  Event handler for  contextmenu  event     document  bind  contextmenu   function event        event preventDefault            lt div class  custom-menu  gt Custom menu lt  div gt             appendTo  body            css  top  event pageY    px   left  event pageX    px           Here  you could bind the event handler to any selector that you want to show a menu for   I ve chosen the entire document   2  Event handler for  click  event  to close the custom menu      document  bind  click   function event           div custom-menu   hide          3  CSS to control the position of the menu    custom-menu       z-index 1000      position  absolute      background-color  C0C0C0      border  1px solid black      padding  2px      The important thing with the CSS is to include the z-index and position  absolute  It wouldn t be too tough to wrap all of this in a slick jQuery plugin   You can see a simple demo here  http   jsfiddle net andrewwhitaker fELma

User · Answer

I know this question is very old  but just came up with the same problem and solved it myself  so I m answering in case anyone finds this through google as I did  I based my solution on  Andrew s one  but basically modified everything afterwards   EDIT  seeing how popular this has been lately  I decided to update also the styles to make it look more like 2014 and less like windows 95  I fixed the bugs  Quantico and  Trengot spotted so now it s a more solid answer   EDIT 2  I set it up with StackSnippets as they re a really cool new feature  I leave the good jsfiddle here for reference thought  click on the 4th panel to see them work    New Stack Snippet    x000D   x000D     JAVASCRIPT  jQuery  x000D   x000D     Trigger action when the contexmenu is about to be shown x000D    document  bind  contextmenu   function  event    x000D       x000D         Avoid the real one x000D      event preventDefault    x000D       x000D         Show contextmenu x000D          custom-menu   finish   toggle 100   x000D       x000D         In the right position  the mouse  x000D      css   x000D          top  event pageY    px   x000D          left  event pageX    px  x000D          x000D      x000D   x000D   x000D     If the document is clicked somewhere x000D    document  bind  mousedown   function  e    x000D       x000D         If the clicked element is not the menu x000D      if     e target  parents   custom-menu   length  gt  0    x000D           x000D             Hide it x000D              custom-menu   hide 100   x000D        x000D      x000D   x000D   x000D     If the menu element is clicked x000D      custom-menu li   click function    x000D       x000D         This is the triggered action name x000D      switch   this  attr  data-action      x000D           x000D             A case for each action  Your actions here x000D          case  first   alert  first    break  x000D          case  second   alert  second    break  x000D          case  third   alert  third    break  x000D        x000D     x000D         Hide it AFTER the action was triggered x000D          custom-menu   hide 100   x000D        x000D     CSS3    x000D   x000D     The whole thing    x000D   custom-menu   x000D      display  none  x000D      z-index  1000  x000D      position  absolute  x000D      overflow  hidden  x000D      border  1px solid  CCC  x000D      white-space  nowrap  x000D      font-family  sans-serif  x000D      background   FFF  x000D      color   333  x000D      border-radius  5px  x000D      padding  0  x000D    x000D   x000D     Each of the items in the list    x000D   custom-menu li   x000D      padding  8px 12px  x000D      cursor  pointer  x000D      list-style-type  none  x000D      transition  all  3s ease  x000D      user-select  none  x000D    x000D   x000D   custom-menu li hover   x000D      background-color   DEF  x000D    x000D   lt  -- HTML -- gt  x000D   lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 1 10 1 jquery js  gt  lt  script gt  x000D   x000D   lt ul class  custom-menu  gt  x000D     lt li data-action  first  gt First thing lt  li gt  x000D     lt li data-action  second  gt Second thing lt  li gt  x000D     lt li data-action  third  gt Third thing lt  li gt  x000D   lt  ul gt  x000D   x000D   lt  -- Not needed  only for making it clickable on StackOverflow -- gt  x000D  Right click me x000D   x000D   x000D    Note  you might see some small bugs  dropdown far from the cursor  etc   please make sure that it works in the jsfiddle  as that s more similar to your webpage than StackSnippets might be

User · Answer

I know that this is rather old also  I recently had a need to create a context menu that I inject into other sites that have different properties based n the element clicked   It s rather rough  and there are probable better ways to achieve this  It uses the jQuery Context menu Library Located Here  I enjoyed creating it and though that you guys might have some use out of it   Here is the fiddle  I hope that it can hopefully help someone out there     function       function createSomeMenu         var all array            var x   event clientX        y   event clientY        elementMouseIsOver   document elementFromPoint x  y       if  elementMouseIsOver closest  a            all array      Link-Fold     name    Link    icon    fa-external-link    items     fold2-key1     name    Open Site in New Tab     fold2-key2     name    Open Site in Split Tab     fold2-key3     name    Copy URL                  if  elementMouseIsOver closest  img            all array      Image-Fold     name    Image   icon    fa-picture-o   items     fold1-key1     name   Download Image    fold1-key2     name    Copy Image Location    fold1-key3     name    Go To Image                  all array      copy     name    Copy   icon    copy    paste     name    Paste   icon    paste    edit     name    Edit HTML   icon    fa-code          return JSON parse all array             setup context menu     contextMenu       selector   body       build  function  trigger  e          return           callback  function key  options              var m    clicked      key            console log m                      items  createSomeMenu

[javascript] Making custom right-click context menus for my web-app

Examples related to javascript

Examples related to jquery

Examples related to jquery-plugins

Examples related to contextmenu

Examples related to right-click