HTML5 context menus came and they look bearable
A couple of times on Habrahabr I mentioned already ([ 1 ], [ 2 ]) that Firefox 8 will support context menus written in HTML5. That is why, as soon as my Firefox on the beta channel was updated to version 8 beta, I went to feel what these menus would look like. It was enough for me from the article " Firefox 8 for developers " to jump through hyperlinks to the corresponding demo page and click the right mouse button - and this is what appeared to my eyes:
![[screenshot of context menu]](https://habrastorage.org/getpro/habr/post_images/4ce/e00/e75/4cee00e754429831fb44d4319f49052a.png)
As it is easy to see, the context menu of the site is located just above the usual browser context menu and is separated from it by a horizontal separator. The context menu of the site can contain individual items and entire submenus, and can also be decorated with colored icons.
Here is a complete listing of the demo page code:
')
As it is not difficult to see, the content part of the menu is in the attributes of the new menuitem element, which is not known to previous browsers - and therefore they must completely ignore it.
I am sure that over time, the authors of plug-ins to the leading javascript libraries (first of all, apparently, jQuery) will compose and adaptsome kind of “crutch” that provides those browsers that do not yet understand this subsection of the HTML5 standard, an alternative option is the javascript context menu conversion on HTML5 language in those types of nadzhavskriptovannyh context menus that have been used in recent years before this current new.
As it is easy to see, the context menu of the site is located just above the usual browser context menu and is separated from it by a horizontal separator. The context menu of the site can contain individual items and entire submenus, and can also be decorated with colored icons.
Here is a complete listing of the demo page code:
')
<!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>testing menu</title> <style> .rotate { -moz-transform: rotate(90deg); } .resize { -moz-transform: scale(0.7); } </style> </head><body><div contextmenu="supermenu"> <h1>Yo. Look at the source code.</h1> <img src="http://people.mozilla.com/~prouget/bugs/context-menu-test/b.gif"> </div> <menu type="context" id="supermenu"> <menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem> <menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem> <menu label="share"> <menuitem label="twitter" onclick="alert('foo')"></menuitem> <menuitem label="facebook" onclick="alert('bar')"></menuitem> </menu> </menu> <script> function rotate() { document.querySelector("img").classList.toggle("rotate"); } function resize() { document.querySelector("img").classList.toggle("resize"); } </script> <style>@import url("http://paulrouget.com/style/pure.css")</style> </body></html> As it is not difficult to see, the content part of the menu is in the attributes of the new menuitem element, which is not known to previous browsers - and therefore they must completely ignore it.
I am sure that over time, the authors of plug-ins to the leading javascript libraries (first of all, apparently, jQuery) will compose and adapt
Source: https://habr.com/ru/post/129474/
All Articles