1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: <menuitem>
slug: Web/HTML/Element/menuitem
tags:
- Déprécié
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/menuitem
---
<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p>
<p>L'élément HTML <strong><code><menuitem></code></strong> représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton.</p>
<p>Une commande peut être définie explicitement, avec un texte et éventuellement une icône ou bien faire référence à une commande décrite dans un autre élément. Une commande peut prendre la forme d'une case à cocher ou d’un groupe de boutons radio.</p>
<h2 id="Attributs">Attributs</h2>
<p>Cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> et notamment <code>title</code> qui peut être utilisé afin de décrire une commande ou pour fournir des indications quant à l'utilisation de celle-ci.</p>
<dl>
<dt>{{htmlattrdef("checked")}}</dt>
<dd>Un attribut booléen qui indique si la commande est sélectionné. Cet attribut peut uniquement être utilisé lorsque l'attribut <code>type</code> vaut <code>checkbox</code> ou <code>radio</code>.</dd>
<dt>{{htmlattrdef("command")}}</dt>
<dd>Cet attribut définit l'identifiant d'un autre élément qui indique une commande invoquée indirectement. Cet attribut ne peut pas être utilisé si les attributs <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> ou <code>type</code> sont utilisés.</dd>
<dt>{{htmlattrdef("default")}}</dt>
<dd>Un attribut booléen qui indique la commande par défaut du menu.</dd>
<dt>{{htmlattrdef("disabled")}}</dt>
<dd>Un attribut booléen qui indique que la commande n'est pas disponible dans l'état actuel. On notera que <code>disabled</code> est sémantiquement différent de <code>hidden</code>.</dd>
<dt>{{htmlattrdef("icon")}}</dt>
<dd>Une URL vers image qui représente la commande.</dd>
<dt>{{htmlattrdef("label")}}</dt>
<dd>Le nom de la commande affiché pour l'utilisateur. Cet attribut est obligatoire lorsque l'attribut <code>command</code> est absent.</dd>
<dt>{{htmlattrdef("radiogroup")}}</dt>
<dd>Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque <code>type</code> vaut <code>radio</code>.</dd>
<dt>{{htmlattrdef("type")}}</dt>
<dd>Cet attribut indique le type de commande dans le menu. C'est un attribut à valeur contrainte qui peut prendre une des valeurs suivantes :
<ul>
<li><code>command</code> : une commande associée à une action donnée. C'est la valeur par défaut de l'attribut.</li>
<li><code>checkbox</code> : une commande qui peut avoir un état parmi deux états différents.</li>
<li><code>radio</code> : une commande qui représente une sélection au sein d'un groupe de commandes qui sont des boutons radio.</li>
</ul>
</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><!-- Un élément <div> avec un menu contextuel -->
<div contextmenu="popup-menu">
Effectuez un clic-droit pour voir le menu contextuel
</div>
<menu type="context" id="popup-menu">
<menuitem type="checkbox" checked>Une case à cocher</menuitem>
<hr>
<menuitem type="command" label="Cette commande ne fait rien" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png">
Les commandes n'affichent pas leurs contenus.
</menuitem>
<menuitem type="command" label="Cette commande contient du JavAScript" onclick="alert('command clicked')">
Les commandes n'affichent pas leurs contenus.
</menuitem>
<hr>
<menuitem type="radio" radiogroup="group1">Bouton radio 1</menuitem>
<menuitem type="radio" radiogroup="group1">Bouton radio 2</menuitem>
</menu>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
width: 300px;
height: 80px;
background-color: lightgreen;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', '300', '80')}}</p>
<h2 id="Résumé_technique">Résumé technique</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
<td>Aucune.</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>Aucun, c'est un élément vide.</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>Cet élément doit avoir une balise ouvrante et ne doit pas avoir de balise fermante.</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>Un élément {{HTMLElement("menu")}} lorsque son attribut vaut <code>type</code> ou que cet élément <code><menu></code> est lui même le fils d'un élément <code><menu</code>>.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Aucun.</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLMenuItemElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML WHATWG", "obsolete.html#menuitem", "<menuitem>")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Aucune modification depuis la dernière dérivation {{SpecName("HTML5.2")}}</td>
</tr>
<tr>
<td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "<menuitem>")}}</td>
<td>{{Spec2("HTML5.2")}}</td>
<td>Dérivation de {{SpecName("HTML WHATWG")}}, rendue obsolète.</td>
</tr>
<tr>
<td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "<menuitem>")}}</td>
<td>{{Spec2("HTML5.1")}}</td>
<td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("html.elements.menuitem")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{HTMLElement("menu")}}</li>
<li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">Les menus contextuels HTML5 dans Firefox</a></li>
</ul>
|
