Tag HTML <menu>

Le tag <menu> est utilisé pour afficher la liste des points du menu. À l’aide de ce tag, on crée des menus contextuels et des panneaux d’instruments.

Chaque élément de liste dans le tag <menu> commence par les éléments <li> ou <menuitem> .

Le tag <menu> n’est plus utilisé en HTML 4.0, nous vous recommandons d’utiliser le tag <ul>.

Syntaxe

Le tag <menu> est apparié; il a les tags ouvrant (<menu>) et fermant (</menu>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      menuitem {
        display: block;
      }
    </style>
  </head>
  <body>
    <menu>
      <menuitem>ol - liste ordonnée</menuitem>
      <menuitem>ul - liste non ordonnée</menuitem>
      <menuitem>menu - liste de menu</menuitem>
    </menu>
  </body>
</html>

Résultat

La même chose peut être obtenue en utilisant le tag <menuitem>

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <div style="background:#1c87c9; padding: 20px; text-align:center; color:#ffffff;" contextmenu="menuexample">
      <p>Cliquez avec le bouton droit de la souris dans cette zone pour ouvrir le menu contextuel.</p>
      <menu type="context" id="menuexample">
        <menuitem label="Refresh" onclick="window.location.reload();"></menuitem>
        <menu label="Share on...">
          <menuitem label="Twitter" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
          <menuitem label="Facebook" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
        </menu>
        <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
      </menu>
    </div>
    <p><span style="color:red;">Rappel:</span> Cela ne fonctionne que dans Firefox.</p>
  </body>
</html>

Résultat

Attributs

Attribut Valeur Description
label text Définit une étiquette visible pour le menu.
type popup
toolbar
context
Définit le type du menu.

Le tag <menu> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <menu> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <menu>:

Coloration du texte dans le tag HTML <menu>:

Styles de mise en page du texte pour la tag HTML <menu>:

Autres propriétés utiles pour le tag HTML <menu>:


Support de Navigateurs

8+


Trouvez-vous cela utile?

Articles Associées