<menu>

  • Raccourci de la révision : HTML/Element/menu
  • Titre de la révision : <menu>
  • ID de la révision : 390481
  • Créé :
  • Créateur : SphinxKnight
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Résumé

L'élément HTML <menu> représente une liste non-ordonnée de choix ou de différentes commandes.

Il n'y a pas de limite dans la profondeur que peuvent avoir les listes imbriquées au sein des éléments {{HTMLElement("menu")}}, {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.

Note d'utilisation : Les éléments {{HTMLElement("menu")}} et {{HTMLElement("ul")}} représentent tous les deux des listes non-ordonnées. Ils se distinguent car l'élément {{HTMLElement("ul")}} ne contient que des objets à afficher alors que l'élément {{HTMLElement("menu")}} peut contenir des objets interactifs pouvant être utilisés.
Note : Cet élément était déprécié en HTML4 mais a été ré-introduit dans HTML5.
  • Catégories de contenu Contenu de flux.
    Si l'attribut de l'élément {{htmlattrxref("type", "menu")}} est vaut toolbar : du contenu interactif, du contenu palpable.
    If the element's {{htmlattrxref("type", "menu")}} attribute is in the list state: contenu interactif.
  • Contenu autorisé Soit : aucun ou plusieurs éléments {{HTMLElement("li")}}
    soit du contenu de flux
  • Omission de balises {{no_tag_omission}}
  • Éléments parents autorisés Tout élément acceptant du contenu de flux
  • Interface DOM {{domxref("HTMLMenuElement")}}

Attributs

Cet élément possède les attributs globaux.

{{htmlattrdef("type")}}
Utilisé pour indique le type de menu à déclarer. Les valeurs définies au sein du standard HTML5 sont :
context
Des commandes d'un menu contextuel. L'utilisateur ne peut interagir avec ces commandes seulement si ce menu contextuel est activé.
toolbar
Une liste de commandes actives avec lesquelles l'utilisateur peut intéragir immédiatement.
list
Une liste non-ordonnées d'objets (chacun étant représenté par un élément {{HTMLELement("li")}}), représentant chacun une commande que l'utilisateur peut utiliser ou activer. Si l'élément n'a pas de descendants {{HTMLELement("li")}} ce sera du contenu de flux décrivant les commandes disponibles.
{{htmlattrdef("label")}}
Fournit l'étiquette associée à l'élément menu.

Exemple

<menu type="toolbar">
  <li>
    <menu label="Fichier">
      <button type="button" onclick="new()">Nouveau...</button>
      <button type="button" onclick="save()">Enregistrer...</button>
    </menu>
  </li>
  <li>
    <menu label="Édition">
      <button type="button" onclick="cut()">Couper...</button>
      <button type="button" onclick="copy()">Copier...</button>
      <button type="button" onclick="paste()">Coller...</button>
    </menu>
  </li>
</menu>

Spécifications

Spécification Statut Commentaires
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-menu-element', '<menu>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-menu-element.html#the-menu-element', '<menu>')}} {{Spec2('HTML5 W3C')}}  

Compatibilité des navigateurs

{{CompatibilityTable}}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Voir aussi

  • Les éléments HTML en lien avec les listes : {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}} et {{HTMLElement("dir")}} (ce dernier étant obsolète).
  • L'attribut global contextmenu qui peut être utilisé dans un élément pour faire référence à l'id d'un menu d'un certain context {{htmlattrxref("type","menu")}}
{{HTML:Element_Navigation}}

Source de la révision

<h2 id="Summary">Résumé</h2>
<p>L'élément <strong>HTML <code>&lt;menu&gt;</code> </strong>représente une liste non-ordonnée de choix ou de différentes commandes.</p>
<p>Il n'y a pas de limite dans la profondeur que peuvent avoir les listes imbriquées au sein des éléments {{HTMLElement("menu")}}, {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</p>
<div class="note">
  <strong>Note d'utilisation : </strong> Les éléments {{HTMLElement("menu")}} et {{HTMLElement("ul")}} représentent tous les deux des listes non-ordonnées. Ils se distinguent car l'élément {{HTMLElement("ul")}} ne contient que des objets à afficher alors que l'élément {{HTMLElement("menu")}} peut contenir des objets interactifs pouvant être utilisés.</div>
<div class="note">
  <strong>Note</strong> : Cet élément était déprécié en HTML4 mais a été ré-introduit dans HTML5.</div>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Catégories de contenu </a></dfn><a href="/fr/docs/HTML/Catégorie_de_contenu#Contenu_de_flux" title="/fr/docs/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.<br />
    Si l'attribut de l'élément {{htmlattrxref("type", "menu")}} est vaut <code>toolbar</code> : du <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, du contenu palpable.<br />
    If the element's {{htmlattrxref("type", "menu")}} attribute is in the <code>list</code> state: <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>.</li>
  <li><dfn>Contenu autorisé </dfn>Soit : aucun ou plusieurs éléments {{HTMLElement("li")}}<br />
    soit du <a href="/fr/docs/HTML/Catégorie_de_contenu#Contenu_de_flux" title="/fr/docs/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a></li>
  <li><dfn>Omission de balises </dfn> {{no_tag_omission}}</li>
  <li><dfn>Éléments parents autorisés </dfn>Tout élément acceptant du <a href="/fr/docs/HTML/Catégorie_de_contenu#Contenu_de_flux" title="/fr/docs/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a></li>
  <li><dfn>Interface DOM </dfn> {{domxref("HTMLMenuElement")}}</li>
</ul>
<h2 id="Attributes">Attributs</h2>
<p>Cet élément possède les <a href="/fr/docs/HTML/Global_attributes" title="HTML/Global_attributes">attributs globaux</a>.</p>
<dl>
  <dt>
    {{htmlattrdef("type")}}</dt>
  <dd>
    Utilisé pour indique le type de menu à déclarer. Les valeurs définies au sein du standard <a href="/fr/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> sont :
    <dl>
      <dt>
        <code>context</code></dt>
      <dd>
        Des commandes d'un menu contextuel. L'utilisateur ne peut interagir avec ces commandes seulement si ce menu contextuel est activé.</dd>
      <dt>
        <code>toolbar</code></dt>
      <dd>
        Une liste de commandes actives avec lesquelles l'utilisateur peut intéragir immédiatement.</dd>
      <dt>
        <code>list</code></dt>
      <dd>
        Une liste non-ordonnées d'objets (chacun étant représenté par un élément {{HTMLELement("li")}}), représentant chacun une commande que l'utilisateur peut utiliser ou activer. Si l'élément n'a pas de descendants {{HTMLELement("li")}} ce sera du contenu de flux décrivant les commandes disponibles.</dd>
    </dl>
  </dd>
  <dt>
    {{htmlattrdef("label")}}</dt>
  <dd>
    Fournit l'étiquette associée à l'élément menu.</dd>
</dl>
<h2 id="Examples">Exemple</h2>
<pre class="brush: html">
&lt;menu type="toolbar"&gt;
  &lt;li&gt;
    &lt;menu label="Fichier"&gt;
      &lt;button type="button" onclick="new()"&gt;Nouveau...&lt;/button&gt;
      &lt;button type="button" onclick="save()"&gt;Enregistrer...&lt;/button&gt;
    &lt;/menu&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;menu label="Édition"&gt;
      &lt;button type="button" onclick="cut()"&gt;Couper...&lt;/button&gt;
      &lt;button type="button" onclick="copy()"&gt;Copier...&lt;/button&gt;
      &lt;button type="button" onclick="paste()"&gt;Coller...&lt;/button&gt;
    &lt;/menu&gt;
  &lt;/li&gt;
&lt;/menu&gt;</pre>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-menu-element', '&lt;menu&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-menu-element.html#the-menu-element', '&lt;menu&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonctionnalité</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support simple</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">Voir aussi</h2>
<ul>
  <li>Les éléments HTML en lien avec les listes : {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}} et {{HTMLElement("dir")}} (ce dernier étant obsolète).</li>
  <li>L'<a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu" title="HTML/Global attributes#attr-contextmenu">attribut global <code>contextmenu</code></a> qui peut être utilisé dans un élément pour faire référence à l'<code>id</code> d'un <code>menu</code> d'un certain <code>context</code> {{htmlattrxref("type","menu")}}</li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revenir à cette révision