DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > HTML5 context menus in Firefox 8+

HTML5 context menus in Firefox 8+

Axel Rauschmayer user avatar by
Axel Rauschmayer
·
Nov. 29, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
5.42K Views

Join the DZone community and get the full member experience.

Join For Free
Starting with version 8, Firefox supports HTML5 context menus. This post is a summary of “HTML5 context menus in Firefox (Screencast and Code)” by Chris Heilmann for Mozilla Hacks.

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

HTML

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Leverage Method Chaining To Add Smart Message Routing in Java
  • Modern REST API Design Principles and Rules
  • Why I'm Choosing Pulumi Over Terraform
  • What SREs Can Learn From the Atlassian Nightmare Outage of 2022

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo