HTML5 context menus in Firefox 8+
Join the DZone community and get the full member experience.Join For Free
Example: The following HTML source code defines a section with a context menu. The menu has one item and a sub-menu with two items.
<section id="noninteractive" contextmenu="imagemenu"> <img src="html5.png" alt="HTML5" id="menudemo"> <menu type="context" id="imagemenu"> <menuitem label="rotate" onclick="rotate()" icon="arrow_rotate_clockwise.png"> </menuitem> <menu label="share"> <menuitem label="twitter" onclick="alert('not yet')"> </menuitem> <menuitem label="facebook" onclick="alert('not yet')"> </menuitem> </menu> </menu> </section>
Naturally, you don’t need to rely on inline event handlers, all usual registration methods are available. When the context menu is activated, it looks like this:
The article also covers:
- How to check whether a browser supports context menus.
- How to dynamically enable/disable menu items depending on what state and app is currently in (active selection etc.): A menu fires a contextmenu event every time it opens.
- A CSS cursor called context-menu is available to give a visual clue as to where context menus are available.
You can try out context menus on a demo page.
Opinions expressed by DZone contributors are their own.