Beispiel
Ein Kontextmenü mit verschiedenen <menuitem> Elemente:
<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> Versuch es selber " Definition und Verwendung
Das <menu> Tag definiert eine Liste / Menü von Befehlen.
Das <menu> Tag wird für Kontextmenüs, Symbolleisten verwendet , und für die Auflistung Formular - Steuerelemente und Befehle.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die das Element vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <menu> | Nicht unterstützt | Nicht unterstützt | 8.0 (Nur Kontextmenüs) | Nicht unterstützt | Nicht unterstützt |
Hinweis: Die <menu> Tag wird nur in Firefox unterstützt, und es funktioniert nur für Kontextmenüs.
Tipps und Hinweise
Tipp: Verwenden Sie CSS Menülisten zu gestalten.
Unterschiede zwischen HTML 4.01 und HTML5
Das <menu> Element wurde als veraltet in HTML 4.01.
Das <menu> Element in HTML5 neu definiert.
Attribute
= Neu in HTML5.
| Attribut | Wert | Beschreibung |
|---|---|---|
| label | text | Gibt ein sichtbares Etikett für das Menü |
| type | list toolbar context | Gibt an, welche Art von Menü anzuzeigen |
globale Attribute
Das <menu> Tag unterstützt auch den Global in HTML - Attribute .
Event-Attribute
Das <menu> Tag unterstützt auch die Veranstaltung in HTML - Attribute .
Verwandte Seiten
HTML - DOM - Referenz: Menü - Objekt
Standard CSS-Einstellungen
Die meisten Browser erscheint auf dem Display <menu> Element mit den folgenden Standardwerte:
menu {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}