Pretty Clean Context Menu In Pure JavaScript – Contextual.js

Category: Javascript , Menu & Navigation | May 10, 2019
Author: LucasReade
Views Total: 351
Official Page: Go to website
Last Update: May 10, 2019
License: MIT

Preview:

Pretty Clean Context Menu In Pure JavaScript – Contextual.js

Description:

Contextual.js is a vanilla JS plugin that attaches a dynamic, customizable, multi-level context/pop-up menu to your element. Without any dependencies.

How to use it:

Download and import the Contextual.js plugin’s files into the html file.

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

Create an array of menu items containing titles, tips, icons, separators, and callback functions as follows:

const menuItems = [
      {title:'Item 1', tip:'Ctrl+A', icon:'check.svg' ,onclick: function(){console.log('Item 1 clicked');}},
      {seperator:true},
      {title:'Item 2', tip:'', icon:'check.svg', children: [
        {title:'Subitem 1', tip:'', icon:'check.svg', onclick: function(){}},
        {title:'Subitem 2', tip:'', icon:'check.svg', onclick: function(){}},
        {title:'Subitem 3', tip:'', icon:'check.svg', onclick: function(){}}
      ]},
      {title:'Item 3', tip:'Ctrl+B', icon:'check.svg',onclick: function(){}},
      {seperator:true},
      {title:'Item 4', tip:'', icon:'check.svg',onclick: function(){console.log('Item 4 clicked');}},
      {title:'Item 5', tip:'Ctrl+C', icon:'check.svg', onclick: function(){}}
  ]

Attach the context menu to an element you specify.

const myInstance = document.getElementById('element');

// triggeredd on right click
myInstance.addEventListener('contextmenu',function(ev){
  ev.preventDefault();
  new contextualMenu({
      items: menuItems
  });
});

Determine whether or not to dock the context menu to the trigger element. Default: false.

new contextualMenu({
    items: menuItems,
    docked: true
});

Changelog:

05/10/2019

  • rewrite and fix submenu

04/25/2019

  • Code clean up and restructure

You Might Be Interested In:


Leave a Reply