Context Menu

by stopsatgreen

HTML

<div id="bigun" contextmenu="gurt-bigun">
    <menu type="context" id="gurt-bigun">
        <menuitem label="alert" icon="http://cdn1.iconfinder.com/data/icons/oxygen/48x48/status/dialog-warning.png"></menuitem>
        <menuitem label="allgood" icon="http://cdn1.iconfinder.com/data/icons/function_icon_set/accepted_48.png"></menuitem>
    </menu>
</div>

CSS

#bigun {
    background-color: red;
    cursor: context-menu;
    height: 50px;   
}

JavaScript

var menuWarn = document.querySelector('#gurt-bigun menuitem[label="alert"]');
menuWarn.addEventListener('click',function(){
    window.alert('WARNING');
});
var menuOK = document.querySelector('#gurt-bigun menuitem[label="allgood"]');
menuOK.addEventListener('click',function(){
    window.alert('Everything is fine');
});