<menu> : Démo HTML5
Mise à jour : 2017-01-22
Attributs de <menu>
- label : nom du menu (uniquement sur un sous-menu fils d'un menu contextuel).
- type : type du menu parmi :
- context : menu contextuel (popup accessible par un click droit), qui peut contenir :
- <menuitem> : entrée de menu supportant les attributs :
- checked : booléen de présélection pour les types "checkbox" et "radio"
- command : identifiant de commande
- default : booléen de commande par défaut
- disabled : booléen d'inactivité du menu
- icon : icône
- label : nom
- radiogroup : nom du groupe de boutons radio
- type : type de commande parmi :
- command : commande classique (par défaut)
- checkbox : coche
- radio : boutons radio
- <menu> : sous-menu récursif (par défaut de type contextuel).
- <hr> : séparateur.
- <menuitem> : entrée de menu supportant les attributs :
- toolbar : barre de menu (valeur par défaut au 1er niveau), qui peut contenir :
- <li> : liste
- Commandes quelconques...
- context : menu contextuel (popup accessible par un click droit), qui peut contenir :
Notes sur le tuto
- Inspiré de cette démo, à utiliser en faisant un click droit.
- Démo plus aboutie.
- Limitations :
- Firefox est le seul à supporter partiellement cette spécification (XUL oblige) :
- Seulement les menus contextuels de type "command".
- L'identifiant du menu ne peut pas être "menu".
- La balise <menuitem> doit obligatoirement être fermée par </menuitem>
- Firefox est le seul à supporter partiellement cette spécification (XUL oblige) :
- Librairie de substitution jQuery et un fork.
Exemple de code HTML5
<u>Menu contextuel</u> :<br> Clickez droit sur le logo : <img id="logo" src="../favicon-96x96.png" contextmenu="menuc"> <menu type="context" id="menuc"> <menuitem label="Action 1" icon="../favicon-16x16.png" onclick="action1()"></menuitem> <hr> <menu label="Action 2"> <menuitem type="command" label="Action 2.1" id="mi21"></menuitem> <menuitem label="Action 2.2" disabled></menuitem> </menu> <menuitem type="checkbox" label="Action 3 (checkbox)" checked id="mi31"></menuitem> <menuitem type="radio" radiogroup="action4" label="Action 4.1 (radio)" id="mi41"></menuitem> <menuitem type="radio" radiogroup="action4" label="Action 4.2 (radio)"></menuitem> </menu> <br> <u>Barre de menu</u> :<br> <menu type="toolbar" id="menut"> <li> <button type="menu" menu="menu1" id="button1">Menu 1</button> <menu type="context" id="menu1"> <menuitem label="Action 1.1"></menuitem> <hr> <menuitem label="Action 1.2"></menuitem> </menu> </li> <li> <button type="menu" menu="menu2" value="Menu 2"> <menu type="context" id="menu2"> <menuitem label="Action 2"></menuitem> </menu> </li> </menu> <script> flag = false function action1(){ flag = !flag document.getElementById("logo").src = (flag ? "../favicon-194x194.png" : "../favicon-96x96.png") } </script>
Démonstration du résultat HTML5
Menu contextuel :
Clickez droit sur le logo :
Barre de menu :
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isTagSupported("menu") isAttributeSupported("menu", "type") isAttributeSpecified("menuc","type", "context") isAttributeSpecified("menut","type", "toolbar") isAttributeSupported("menu", "label") isTagSupported("menuitem") isAttributeSupported("menuitem", "checked") isAttributeSupported("menuitem", "command") isAttributeSupported("menuitem", "default") isAttributeSupported("menuitem", "disabled") isAttributeSupported("menuitem", "icon") isAttributeSupported("menuitem", "label") isAttributeSupported("menuitem", "radiogroup") isAttributeSupported("menuitem", "type") isAttributeSpecified("mi21", "type", "command") isAttributeSpecified("mi31", "type", "checkbox") isAttributeSpecified("mi41", "type", "radio") isAttributeSupported("img", "contextmenu") isAttributeSupported("button", "menu") isAttributeSpecified("button1", "type", "menu") </script>