HTML <menu> Tag
<script type="text/javascript">
function changeColor (thisColor) {
document.getElementById('myMsg').style.borderColor = thisColor;
}
</script>
<div id="myMsg" contextmenu="myMenu" style="width:50%;padding:0.5em;border:10px solid black;">
<p>Right click on the me to invoke the context menu (look for <samp>Change Border Color...</samp>).</p>
<p><strong>Note</strong>: Only supported in Firefox at time of writing.</p>
</div>
<menu type="context" id="myMenu">
<menu type="popup" label="Change Border Color...">
<menuitem label="Black (default)" onclick="changeColor('black');"></menuitem>
<menuitem label="Orange" onclick="changeColor('orange');"></menuitem>
<menuitem label="Red" onclick="changeColor('red');"></menuitem>
<menuitem label="Green" onclick="changeColor('green');"></menuitem>
<menuitem label="Blue" onclick="changeColor('blue');"></menuitem>
</menu>
</menu>
Right click on the me to invoke the context menu (look for Change Border Color...).
Note: Only supported in Firefox at time of writing.
The above example demonstrates usage of the <menu>
element.
The <menu>
element represents a list of commands. The type
attribute is used to specify the type of menu.
The <menu>
element can contain <menuitem>
elements or, if type="toolbar"
, <li>
elements.