<menu> HTML-Menu-Element

Das <menu> HTML-Element wird in der HTML-Spezifikation als semantische Alternative zu <ul> beschrieben, wird jedoch von Browsern (und im Accessibility-Baum) genauso behandelt wie <ul>. 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

Dieses Boolean-Attribut deutet darauf hin, dass die Liste in einem kompakten Stil angezeigt 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.

Verwendungshinweise

Die Elemente <menu> und <ul> 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 darstellt, die Befehle enthält, 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 funktionell 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 Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere listenbezogene HTML-Elemente: <ol>, <ul>, und <li>.