Simple Vanilla JavaScript Context Menu

Preview:

Description:

A simple, animated, customizable modal-style context menu (right click menu) implemented in Vanilla JavaScript. The context menu will slide into your webpage with a fullscreen overlay as you right click on a specific container.

How to use it:

Load the necessary Vanilla JavaScript Framework in the html document.

<script src="/path/to/vanilla.min.js"></script>

Load the vanilla.contextmenu.js and vanilla.contextmenu.css in the document.

<script src="/path/to/vanilla.contextmenu.js"></script>
<link rel="stylesheet" href="/path/to/vanilla.contextmenu.css">

Add data-modal attribute to your links and use href attribute to define what should be opened in the modal.

<div id="example-1" class="example">
  <ul>
      <li data-highlight="highlight">Right click me</li>
  </ul>
</div>

The JavaScript to create the context menu.

vanilla.ctxm( '#example-1 li', {
  items: {
      highlight: { // Highlight the clicked image
          title:'Highlight',
          icon:'this.data-highlight',
          callback: function() {
              var target = vanilla.ctxm.getTarget();
              target.toggleClass('highlight')
                  .attr('data-highlight', 'highlight');;
          }
      },
      delete: { // Delete the clicked item
          title:'Delete',
          icon:'delete',
          callback: function() {
              var target = vanilla.ctxm.getTarget();
              target.remove();
          }
      }
  }
} );

Full configuration options.

vanilla.ctxm.defaults = {
  background: '#FFF',             // Background color
  border: '#CDCDCD',              // Border color
  fontSize: '14px',               // Font size
  headerText: 'Context menu',     // Menu header title
  iconPosition: 0,                // Icon position [0: left, 1: right]
  opacity: 0.5,                   // Overlay opacity
  overlay: '#000',                // Overlay color
  width: '200px'                  // Menu width
}