<menu>: Das Menu-Element

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.

compact Veraltet

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-Eigenschaft line-height mit einem Wert von 80% 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.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere HTML-Elemente im Zusammenhang mit Listen: <ol>, <ul>, und <li>.