How does the MDN (Mozilla Developer Network) website change the context menu?
For example, this page.
I thought they created the whole context menu to call it when the contextmenu event is fired, but it seems a little crazy.
Furthermore, it doesn't work on Chrome, so I suppose it's a Firefox-only feature.
Does anybody know how they do it?

How does the MDN (Mozilla Developer Network) website change the context menu?
For example, this page.
I thought they created the whole context menu to call it when the contextmenu event is fired, but it seems a little crazy.
Furthermore, it doesn't work on Chrome, so I suppose it's a Firefox-only feature.
Does anybody know how they do it?

• javascript
• css
• mozilla

• 1 The context menu looks the same to me? Can you add a screenshot? – Alexander O'Mara Commented Jul 2, 2014 at 22:43
• I added the image on the question – user3624429 Commented Jul 2, 2014 at 23:26
• I cannot reproduce this on Firefox 30 – MrMike Commented Jul 2, 2014 at 23:30
• Right now I'm using Firefox 31.0 (Beta) – user3624429 Commented Jul 2, 2014 at 23:33
• Here's what I see on Firefox 30, where the left menu is the one I see on MDN and the right the one I see on Google. I'm assuming @patkoala is talking about the addition of the "Edit page" and "View page history". i.imgur./dQ3ncKK.png – Dominic K Commented Jul 2, 2014 at 23:37

2 Answers 2

Documentation is a bit sparse, but it's using the contextmenu attribute which is new in HTML5. It uses the menu HTML tag which is now different from its HTML4 implementation. Browser support isn't so great, but it is supported in Firefox 8.

Here is a screenshot of the DOM on the page showing the relevant HTML, the contextmenu attribute on the body and the menu tags which are expanded.

UPDATE: This answer previously stated that Chrome 36 and up supported this feature, as previously stated by the caniuse page. This appears not to be the case and caniuse has removed this information.

I just finished writing an article about HTML5 menus and browser support: https://dpogue.ca/articles/html5-menu.html

To summarize:

• Firefox implements this using the older (not spec-pliant) type="context" attribute on the menu tag. There is a bug for Firefox to update to the newer spec.

• Chrome implements it according to the spec (type="popup") as of Chrome 41, but it's behind the "Experimental Web Platform Features" flag.

Because of this difference in the type attribute, it's essentially impossible to target both implementations at the same time. While type="context" means that Firefox users will see the menu, it is contrary to the spec and probably won't be supported by other browsers.