Author: | Kaeldazs |
---|---|
Views Total: | 2,980 views |
Official Page: | Go to website |
Last Update: | September 21, 2016 |
License: | MIT |
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 );