<menu>: Das Menü-Element

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 an, dass die Liste in einem kompakten Stil dargestellt 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 Hauptunterschied besteht darin, dass <ul> hauptsächlich Elemente zur Anzeige enthält, während <menu> eine Symbolleiste darstellt, die Befehle enthält, die der Benutzer ausführen oder aktivieren kann.

Beispiele

Symbolleiste

In diesem Beispiel wird ein <menu> verwendet, um eine Symbolleiste 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 listenbezogene HTML-Elemente: <ol>, <ul> und <li>.