Context-menu example

HTML

<body>
  <div id="test1">
    <a href="www.google.com" class="test">Google</a>
    <a href="www.google.com" class="test">Link 2</a>
    <a href="www.google.com" class="test">Link 3</a>
    <a href="www.google.com" class="test">Link 4</a>
  </div>

  <!-- initially hidden right-click menu -->
  <div class="hide" id="rmenu">
    <ul>
      <li>
        <a href="http://www.google.com">Google</a>
      </li>

      <li>
        <a href="http://localhost:8080/login">Localhost</a>
      </li>

      <li>
        <a href="C:\">C</a>
      </li>
    </ul>
  </div>
</body>

CSS

.show {
  z-index: 1000;
  position: absolute;
  border: 1px solid blue;
  padding: 2px;
  display: fixed;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}

JavaScript

$(document).ready(function() {
  document.oncontextmenu = function() { // Use document as opposed to window for IE8 compatibility
    return false;
  };

  if (window.addEventListener) {
    function handleContextMenu() {
      var menuElem = document.getElementById("rmenu");
      menuElem.className = "show";
      menuElem.style.top = mouseY(event);
      menuElem.style.left = mouseX(event);
    }

    window.addEventListener('contextmenu', function(e) {
      handleContextMenu();
      e.preventDefault();
    }, false);
  } else {
    document.attachEvent('oncontextmenu', function() {
      handleContextMenu();
      window.event.returnValue = false;
    });
  }
});

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});



function mouseX(evt) {
  if (evt.pageX) {
    return evt.pageX;
  } else if (evt.clientX) {
    return evt.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  } else {
    return null;
  }
}

function mouseY(evt) {
  if (evt.pageY) {
    return evt.pageY;
  } else if (evt.clientY) {
    return evt.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  } else {
    return null;
  }
}