JavaScript contextmenu
Adding submenus to the javascript contextmenu plugin
<html> <script src="https://jsuites.net/v3/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v3/jsuites.css" type="text/css" /> <div id='container' style='border:1px solid gray;width:400px;height:300px;'></div> <div id='contextmenu'></div> <script> var contextMenu = jSuites.contextmenu(document.getElementById('contextmenu'), { items:[ { title:'Copy', shortcut:'Ctrl + C', onclick:function() { alert('Copy'); } }, { type:'line' }, { title:'Visit the website', onclick:function() { window.open('https://jspreadsheet.com/v7'); } }, { title:'Google', disabled: true, onclick:function() { alert('jSuites v3') } }, { title: 'Sub context menu', submenu: [ { title:'Sub menu 1', shortcut:'Ctrl + X', onclick:function() { alert('SubMenu 1-1'); } }, { title:'Sub menu 2', disabled: true, onclick:function() { alert('SubMenu 1-2') } }, { title: 'Sub sub context menu', submenu: [ { title:'Sub menu 2-1', shortcut:'Ctrl + X', onclick:function() { alert('SubMenu 2-1'); } }, { title:'Sub menu 2-2', disabled: true, onclick:function() { alert('SubMenu 2-2') } }, ], } ], }, { title:'About', onclick:function() { alert('jSuites v2') } }, ], onclick:function() { contextMenu.close(false); } }); document.getElementById('container').addEventListener("contextmenu", function(e) { contextMenu.open(e); e.preventDefault(); }); </script> </html>