La balise Menu de HTML 5
Proche de la balise select, menu est ajouté à HTML 5 pour créer un menu contextuel ou une barre d'outils, selon le type assigné à la balise.
En fait le contenu est plus varié que pour select et les possibilités de rendu sont plus développées.
La balise menu est actuellement peut Implémentée. Vérification dans votre navigateur, on doit avoir ci-dessous une ligne de menu horizontal:
Il est en fait possible d'obtenir le résultat voulu avec une feuille de style (voir les liens en bas), ce qui explique sans doute leretard pour implémenter cette balise.
Voici l'image d'une barre d'outil créée avec la balise menu et des boutons ou du CSS 3 fournie par le W3C:
Syntaxe
Un menu peut contenir des options, une liste, des boutons, d'autres menus, des balises command, des input, des séparateurs <hr>.
Cet élément doit avoir une balise ouvrante et une balise fermante contrairement aux éléments contenus.
<menu type="" label="">
</menu><menu type="" label="">
<option>
<option>
</menu><menu type="" label="">
<li>
<li>
</menu>Un bouton peut représenter un sous-menu, dans ce cas la syntaxe peut ressembler à ceci:
<menu type="toolbar">
<li>
<menu label="Fichier">
<button type="button" onclick="fopen()">Ouvrir</button>
... boutons....
</menu>
</li>
<li>
<menu label="Editer">
<button type="button" onclick="fcopy()">Copier</button>
...
</menu>
</li>
</menu>Le rendu correspond à l'image en début de page. Un menu interne dans un menu de type toolbar est présenté comme un bouton.
Attributs de menu
| Attribut | Valeur | Fonction | Version |
|---|---|---|---|
| type | "context" | Liste de commandes qui apparaît dans un contexte. |
HTML 5 |
| type | "toolbar" | Barre d'icônes représentant des sous-menus ou des commandes. |
HTML 5 |
| type | "list" (défaut) | Liste de commandes. |
|
| label | chaîne | Sert à identifier le menu ou le sous-menu. |
HTML 5 |
| ID | Chaîne | Identificateur utilisable pour associer le menu à un élément. |
Attribut relatif
L'attribut relatif associe un menu à un autre élément de la page par l'ID de la balise menu. C'est donc un attribut général pour toute balise HTML.
| Attribut | Valeur | Fonction | Version |
|---|---|---|---|
| contextmenu | ID menu | Associe un menu contextuel à un élément. |
HTML 5 |
Quand la souris passe sur cet élément, ou qu'une touche du clavier est pressée sur cet élément, un évènement "show" (affiche) est activé, le menu contextuel dont l'id est assigné à contextmenu doit automatiquement apparaître.
Attributs des éléments contenus (commandes)
Quel que soient leur type, élément de liste, option, bouton, les éléments d'un menu sont des commandes et ont un ensemble d'attributs utiles. On les appelle des facettes.
| Attribut | Valeur | Fonction | Version |
|---|---|---|---|
| type | commande | Définit le type de l'élément. Ex: radio. |
|
| id | chaîne | Identificateur. |
|
| label | chaîne | Texte affiché et visible par l'utilisateur. |
HTML 5 |
| hint | chaîne | Un message surgissant pour décrire la commande. |
HTML 5 |
| icon | URL | Adresse d'une image. |
HTML 5 |
| disabled | disabled/rien | Etat actif ou non. |
|
| checked | checked/rien | Elément coché ou non. |
|
| hidden | true/false | Elément caché ou non. |
|
| action | URL/script/<a> | Action associée à l'élément. |
Action peut être un attribut de soumission de formulaire action="" ou un évènement JavaScript. Si l'élément est une simple URL dans une balise <a>, l'action est le contenu de l'attribut href.
JavaScript
On peut accéder à ces attributs avec ces variables JavaScript, si on donne à l'élément du menu dans le DOM le nom element:
- element.commandType pour le type.
- element.id
- element.label
- element.title pour l'aide contextuelle.
- element.icon
- element.accessKeyLabel pour l'attribut Access Key.
- element.hidden pour l'état caché ou non.
- element.disabled pour l'état actif ou non.
- element.checked pour l'état coché ou non.
- element.click()
Ceci active l'action associée à l'élément. Si c'est un attribut action="", le contenu assigné sera exécuté, sinon l'action à accomplir sera interprétée. Si la commande est une balise <a>, l'URL assignée à href sera chargée.
Voir aussi: Onglets en CSS.
Cette démonstration utilise une liste pour créer des onglets entièrement avec une feuille de style. Le même principe peut être appliqué pour un menu horizontal.