HTML/Interaktiv/menu

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das menu-Element soll für Toolbars und Werkzeugleisten wie in Desktop-Applikationen verwendet werden, die dann eine Auswahl von Befehlen ermöglichen. Das ursprünglich für diese Befehle vorgesehene command-Element ist obsolet, Kommandos sollten in einem menuitem-Element enthalten sein. Daneben könnte menu auch Listenelemente oder input-Elemente wie beispielsweise Radio- oder Checkboxen zur Auswahl bestimmter Optionen enthalten.

  • HTML5
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Hinweis

Navigationsleisten und Menüs mit Verweisen sollten mit dem nav-Element umschlossen werden. Ein menu-Element soll eben keine Liste von Verweisen repräsentieren, sondern eine Liste von Befehlen oder Werkzeugen.

Folgende Angaben sind nach W3C vorgesehen:

  • type:
    • popup: öffnet ein Kontextmenü
    • toolbar: definiert eine Toolbar
  • label: Name, um (verschachtelte)- Kontextmenüs anzusprechen. (nur nötig, wenn type="popup")


Beachten Sie: Firefox unterstützt das menu-Element teilweise; allerdings benutzt es einen type="context" anstelle des in der Spezifikation dafür vorgesehenen type="popup".[1]

Alternativ zum toolbar-Attribut verwendet Firefox ein list-Attribut.

Im Unterschied zum dialog-Element, das auch bei fehlender Unterstützung trotzdem gerendert wird, werden menu- und menuitem-Elemente von keinem aktuellen Browser dargestellt.


Beachten Sie: Update: Das W3C benennt in HTML 5.1 type="popup" in type="context" um, um bestehende an der Firefox-Syntax ausgerichtete Webseiten zu berücksichtigen.[2].
Beispiel: Kontextmenü mit menu ansehen …
<main contextmenu="werkzeugleiste">  
  <p>Klicken Sie in den Inhaltsbereich, um das veränderte Kontextmenü zu sehen.</p>

  <menu type="context" id="werkzeugleiste">
    <menuitem type="command" label="Neues Dokument" onclick="new()">
    <menuitem type="command" label="Speichern unter ..." onclick="saveAs()">
  </menu>
</main>
Dieses Beispiel verwendet das vom Standard abweichende type="context". Damit öffnet sich im Firefox bei Rechtsklick ein modifiziertes Kontextmenü.


Im Augenblick (Stand: Februar 2016) gibt es keine Bestrebungen das menu-Element in andere Browser zu implementieren.[3]

menuitem[Bearbeiten]

Das menuitem-Element enthält einen Befehl, den der Benutzer durch ein Toolbar oder ein Kontextmenü bedienen kann. Es ist ein leeres Element; benötigt also keinen End-Tag.

  • HTML5
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Hinweis

Bislang ist die native Unterstützung durch die Browser mangelhaft, so unterstützt bislang einzig Firefox das Element mit dem nicht in der Spezifikation vorgesehenen type="context".
Sie können menu und menuitem also verwenden, um eine semantisch sinnvolle Auszeichnung zu erhalten, müssen die gewünschte Darstellung oder Interaktivität allerdings noch durch Einsatz von CSS und JavaScript nachrüsten.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

  1. MDN: Bug 1100749 - <menu> element type=context should be renamed to type=popup
  2. W3C: Rename <menu type=popup> to <menu type=context>
  3. Microsoft Edge Platform Status: menu element