Balise HTML <menu>
La balise <menu> définit une liste de commandes ou d'éléments de menu. Historiquement, elle était utilisée pour créer des menus contextuels, des barres d'outils et répertorier les contrôles de formulaire.
Un menu contextuel était historiquement constitué d'un élément <menu> contenant des éléments <menuitem> pour chaque option sélectionnable, ainsi que des éléments <hr> qui divisaient le contenu du menu en sections à l'aide de lignes séparatrices. Toutefois, ces fonctionnalités ont été supprimées de la spécification HTML.
Un menu de barre d'outils utilise un élément <menu>. Son contenu peut être structuré de deux manières :
- Il peut contenir une liste non ordonnée d'éléments représentés par l'élément HTML
<li>. - Il peut contenir un contenu de flux qui décrit les options et commandes accessibles.
DANGER
La balise <menu> est considérée comme obsolète, et la balise <menuitem> a été complètement supprimée de la spécification HTML. La prise en charge des menus contextuels et des barres d'outils via ces balises a été largement supprimée de tous les principaux navigateurs. Pour les menus contextuels modernes, utilisez CSS et JavaScript. Pour les listes standard, utilisez plutôt l'élément <ul>.
Syntaxe
La balise <menu> s'utilise par paires. Le contenu est écrit entre les balises d'ouverture (<menu>) et de fermeture (<​/menu>).
Exemple de la balise HTML <menu> avec des éléments <li> :
Exemple de balise HTML <menu>
Remarque : Les navigateurs modernes ne rendent pas <menu> comme une liste par défaut, donc display: block et list-style: none sont utilisés pour réinitialiser le style par défaut.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: block;
list-style: none;
padding: 0;
}
menu li {
display: block;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
</style>
</head>
<body>
<menu>
<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>menu - menu list</li>
</menu>
</body>
</html>Résultat
Exemple de la balise HTML <menu> pour créer un menu de barre d'outils :
Balise HTML <menu> dans les navigateurs modernes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: flex;
gap: 10px;
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
}
menu li {
list-style: none;
padding: 8px 12px;
background: #1c87c9;
color: #fff;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<menu>
<li onclick="alert('Refresh')">Refresh</li>
<li onclick="alert('Share')">Share</li>
<li onclick="alert('Email')">Email</li>
</menu>
</body>
</html>La différence entre les balises <menu> et <ul>
Ces deux éléments ont un comportement similaire. Les éléments <menu> et <ul> sont tous deux utilisés pour créer des listes non ordonnées. La principale différence est que la balise <menu> est spécifiquement conçue pour les commandes, les barres d'outils et les menus contextuels, tandis que la balise <ul> est utilisée pour les listes non ordonnées générales.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| label | texte | Définit une étiquette visible pour le menu. |
| type | popup, toolbar, context | Définit le type de menu. Remarque : L'attribut type et ses valeurs étaient expérimentaux et ont été supprimés dans HTML5.1. |
La balise <menu> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
What is the purpose of the '<menu>' HTML tag, and on which browsers can it be used?