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>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <menu>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <menu>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <menu>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| ✕ | 8+ | ✕ | ✕ |
Pratiquez vos connaissances
Qu'est-ce qui est vrai à propos de la balise HTML <menu> selon la page w3docs.com?
Correcte!
Incorrecte!