Das<menu>HTML-Element wird in der HTML-Spezifikation als semantische Alternative zu<ul> beschrieben, 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>  <a href="#">NASA's Webb Delivers Deepest Infrared Image of Universe Yet</a>  <menu>    <li><button>Save for later</button></li>    <li><button>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 dieglobalen Attribute.

compactVeraltet

Dieses boolesche Attribut deutet an, dass die Liste in einem kompakten Stil dargestellt werden sollte. Die Interpretation dieses Attributs ist browserspezifisch. Verwenden Sie stattdessenCSS: Um einen ähnlichen Effekt wie dascompact-Attribut zu erzielen, kann die CSS-Eigenschaftline-height mit einem Wert von80% 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>Copy</button></li>  <li><button>Cut</button></li>  <li><button>Paste</button></li></menu>

Beachten Sie, dass dies funktional nicht anders ist als:

<ul>  <li><button>Copy</button></li>  <li><button>Cut</button></li>  <li><button>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>.