Balise HTML <menu>
Exemple
Un menu contextuel avec différents éléments <menuitem> :
<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
</menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png"
onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
</menuitem>
<menuitem label="Facebook" icon="ico_facebook.png"
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>
Définition et utilisation
La balise <menu> définit une liste/un menu de commandes.
La balise <menu> est utilisée pour les menus contextuels, les barres d'outils et pour répertorier les contrôles et commandes de formulaire.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.
| Element | |||||
|---|---|---|---|---|---|
| <menu> | Not supported | Not supported | 8.0 (only context menus) |
Not supported | Not supported |
Remarque : La balise <menu> n'est prise en charge que dans Firefox et ne fonctionne que pour les menus contextuels.
Conseils et remarques
Conseil : utilisez CSS pour styliser les listes de menus.
Les attributs
| Attribute | Value | Description |
|---|---|---|
| label | text | Specifies a visible label for the menu |
| type | list toolbar context |
Specifies which type of menu to display |
Attributs globaux
La balise <menu> prend également en charge les attributs globaux en HTML .
Attributs d'événement
La balise <menu> prend également en charge les attributs d'événement en HTML .
Pages connexes
Référence HTML DOM : Objet Menu
Paramètres CSS par défaut
La plupart des navigateurs afficheront l'élément <menu> avec les valeurs par défaut suivantes :
menu {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}