<menu>: Das Menu-Element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das <menu> HTML-Element wird in der HTML-Spezifikation als semantische Alternative zu <ul> beschrieben, jedoch von Browsern (und im Zugänglichkeitsbaum) nicht anders als <ul> behandelt. Es repräsentiert eine ungeordnete Liste von Elementen (die durch <li>-Elemente dargestellt werden).
Probieren Sie es aus
<div class="news"> <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a> <menu> <li><button id="save">Save for later</button></li> <li><button id="share">Share this news</button></li> </menu> </div> .news { background-color: bisque; padding: 1em; border: solid thin black; } menu { list-style-type: none; display: flex; padding: 0; margin-bottom: 0; gap: 1em; } Attribute
Dieses Element akzeptiert auch die globalen Attribute.
compactVeraltet-
Dieses boolesche Attribut deutet darauf hin, dass die Liste in einem kompakten Stil gerendert werden sollte. Die Interpretation dieses Attributs ist browserspezifisch. Verwenden Sie stattdessen CSS: Um einen ähnlichen Effekt wie das
compact-Attribut zu erzielen, kann die CSS-Eigenschaftline-heightmit einem Wert von80%verwendet werden.
Nutzungshinweise
Die <menu>- und <ul>-Elemente repräsentieren beide eine ungeordnete Liste von Elementen. Der wesentliche Unterschied besteht darin, dass <ul> hauptsächlich Elemente zur Anzeige enthält, während <menu> eine Werkzeugleiste mit Befehlen darstellt, die der Benutzer ausführen oder aktivieren kann.
Hinweis: In frühen Versionen der HTML-Spezifikation hatte das <menu>-Element einen zusätzlichen Anwendungsfall als Kontextmenü. Diese Funktionalität wird als obsolet betrachtet und befindet sich nicht mehr in der Spezifikation.
Beispiele
Werkzeugleiste
In diesem Beispiel wird ein <menu> verwendet, um eine Werkzeugleiste für eine Bearbeitungsanwendung zu erstellen.
HTML
<menu> <li><button onclick="copy()">Copy</button></li> <li><button onclick="cut()">Cut</button></li> <li><button onclick="paste()">Paste</button></li> </menu> Beachten Sie, dass dies funktional nicht anders ist als:
<ul> <li><button onclick="copy()">Copy</button></li> <li><button onclick="cut()">Cut</button></li> <li><button onclick="paste()">Paste</button></li> </ul> CSS
menu, ul { display: flex; list-style: none; padding: 0; width: 400px; } li { flex-grow: 1; } button { width: 100%; } Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Flussinhalt. Wenn die Kinder des Elements mindestens ein |
|---|---|
| Zulässiger Inhalt | Null oder mehr Vorkommen von |
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Zulässige Eltern | Jedes Element, das Flussinhalt akzeptiert. |
| Implizierte ARIA-Rolle | list |
| Zulässige ARIA-Rollen | directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar oder tree |
| DOM-Schnittstelle | [`HTMLMenuElement`](/de/docs/Web/API/HTMLMenuElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-menu-element |