Context menu test

Testing the context menu either from mouse or from keyboard, especially for IE/Edge.

by Emanuele del Grande

HTML

<div class="logo">
    <span>JS</span> <span>RightClick</span>
    <div>Right click and context menu management</div>
</div>


<p>
Test on targeting the mouse right click and context menu from keyboard. 
</p>
<!-- initial snippet: http://jsfiddle.net/smxLk/ -->
<div id="menu">I am the context menu</div>
<p>Press tab to focus the following elements.<br />
Right-click on them to check context menu.
</p>

<ul>
  <li tabindex="1">One</li>
  <li tabindex="2">Two</li>
  <li tabindex="3">Three</li>
  <li tabindex="4">Four</li>
</ul>

<pre id="console"></pre>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }

/* SPECIFIC STYLES */
#menu { display: none; position: absolute; z-index: 1000; width: 100px; padding: 20px; border: 1px solid #aaa; background: #eee; }
ul { display: block; list-style-type: none; overflow: auto; margin: 0; padding: 0; }
li {
  display: block; float: left; width: 80px; height: 80px; margin: 10px 10px 0 0;
  padding: 10px; border: 2px dashed #6ac; background: #9df; cursor: pointer;
}
li:focus { outline: none; border: 2px solid #f79; }

JavaScript

var $menu = $('#menu');

$(document).on('contextmenu', function(e) {
  $menu.css({
    left: e.pageX + 'px',
    top: e.pageY + 'px'
  }).show();
  
  $('#console').text('pageX = ' + e.pageX + 'px, pageY = ' + e.pageY + '\n');
  e.preventDefault();
}).on('click', function(e) {
  $menu.hide();
  $('#console').text('');
});

$menu.on('click', function(e) {
  $(this).hide();
  $('#console').text('');
});