JavaScript contextmenu

Adding submenus to the javascript contextmenu plugin


<html>
<script src="https://bossanova.uk/jsuites/v3/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/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://bossanova.uk/jexcel/v3/examples');
            }
        },
        {
            title:'Google',
            disabled: true,
            onclick:function() {
                alert('jSuites v2')
            }
        },
        {
            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>