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?
Asked
Active
Viewed 4,450 times
10
-
1The context menu looks the same to me? Can you add a screenshot? – Alexander O'Mara Jul 02 '14 at 22:43
-
I added the image on the question – Jul 02 '14 at 23:26
-
I cannot reproduce this on Firefox 30 – Mike Koch Jul 02 '14 at 23:30
-
Right now I'm using Firefox 31.0 (Beta) – Jul 02 '14 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". http://i.imgur.com/dQ3ncKK.png – Dominic K Jul 02 '14 at 23:37
2 Answers
10
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.
Alexander O'Mara
- 58,688
- 18
- 163
- 171
4
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-compliant)
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.
dpogue
- 553
- 5
- 7
-
For some reason it's not listed on the Chromium [Web Platform Status page](https://www.chromestatus.com/features#menu), but [here is the relevant bug](https://code.google.com/p/chromium/issues/detail?id=87553) for anyone who wants to track it. – janfoeh Mar 04 '15 at 18:24
-