HTML5 context menus in Firefox 8+
HTML5 context menus in Firefox 8+
Join the DZone community and get the full member experience.
Join For FreeLearn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
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.
Source: http://www.2ality.com/2011/11/ff8-html5-context-menus.html
What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}