Configurable Multi-level Dropdown Menu Library – Contextmenu

Preview:

Description:

Contextmenu.js is a lightweight vanilla JavaScript library for generating a dynamic multi-level drop-down menu from plain HTML and JavaScript.

How to use it:

Place the style sheet contextmenu.css and JavaScript file contextmenu.js into your web project.

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

Define an array of nested menu item objects as follows:

var menu = [
  {
    text: 'Item 1',
    onclick: function(e) {
      alert(e);
    }
  }, {
    text: 'Item 2',
    sub: [
      {
        text: 'Item 2.1'
      },
      {
        text: 'Item 2.2',
        sub: [
          {
            text: "Item 2.2.1"
          }, {
            text: "Item 2.2.2",
            sub: [
              {
                text: "Item 2.2.2.1"
              }, {
                text: "Item 2.2.2.2",
                sub: [
                  {
                    type: "infos",
                    text: "Item 2.2.2.2.1"
                  },
                  {
                    type: 'html',
                    text: "<div class=\"bidule\">Item 2.2.2.2.2</div>"
                  }, {
                    type: 'infos',
                    text: "Item 2.2.2.2.3"
                  }
                ]
              }
            ]
          }, {
            text: "Item 2.2.3"
          }
        ]
      }
    ]
  }, {
    type: 'infos',
    text: "Item 3"
  }
]

Show the context menu.

showContextMenu(event, menu, opt);

Available options.

// show an arrow
arrow: true,
// 'center', 'left', 'right' or false
align: 'center',
// align the menu vertically relatively to an element and add 'contextmenu-active' class to him when the menu is active
element: document.getElementById('id'),
// add 'contextmenu-active' class to element when the menu is active
toggleClass: document.getElementById('id'),
// menu width
width: '55%'
// add margin in pixels
margin: {
  top: 5,
  right: 0,
  bottom: 5,
  left: 0
}

API.

// hide the menu
hideContextMenu()
// hude all sub meunus
hideContextMenuChild(0) 
// add events
addEvents(
  window, //element
  'keydown resize dragover click contextmenu DOMMouseScroll wheel mousewheel touch', //events
  hideContextMenu //handler
);
// remove events
removeEvents(
  window, //element
  'keydown resize dragover click contextmenu DOMMouseScroll wheel mousewheel touch', //events
  hideContextMenu //handler
);