Dynamic Context Menu With Custom Icons – custoMenu

A dynamic, customizable context menu built with jQuery that can be attached to any container element, with support for custom icons, descriptions and click functions.

How to use it:

Import the stylesheet custoMenu.css and JavaScript custoMenu.js into the document.

<link rel="stylesheet" href="custoMenu.css">
<script src="custoMenu.js"></script>

Load an icon set of your choice for the menu icons.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Create menu items with custom icons and descriptions in the JavaScript as follows:

var filectxmenu = {
    name: 'file',
    items: {
      'openfile' : {
        text: '<i class="material-icons">&#xE254;</i>',
        desc: 'Open',
        func: function() {
            alert('lol');
        }
      },
      'downloadfile' : {
        text: '<i class="material-icons">&#xE2C4;</i>',
        desc: 'Download'
      },
      'copy' : {
        text: '<i class="material-icons">&#xE14D;</i>'
      },
      'cut' : {
        text: '<i class="material-icons">&#xE14E;</i>'
      },
      'delete' : {
        text: '<i class="material-icons">&#xE872;</i>'
      },
      'rename' : {
        text: '<i class="material-icons">&#xE22B;</i>'
      }
    }
}

Initialize the context menu.

document.addEventListener('DOMContentLoaded', function(){
  custoMenu.addMenu(filectxmenu);
});

Attach the context menu to an element you specify.

<div class="custoMe" 
     data-name="file" 
     data-src="source">
     Right Click Me
</div>