HTML/Interaktiv/menu

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das menu-Element sollte Toolbars und Werkzeugleisten wie in Desktop-Applikationen mit einer Auswahl von Befehlen ermöglichen. Das ursprünglich für diese Befehle vorgesehene command-Element ist ebenfalls 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.

  • Achtung
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Achtung!

Firefox unterstützte das menu-Element teilweise; allerdings benutzte es einen type="context" anstelle des in der Spezifikation dafür vorgesehenen type="popup".[1] Alternativ zum toolbar-Attribut verwendete Firefox ein list-Attribut.

Im Augenblick (Stand: September 2017) gibt es keine Bestrebungen das menu-Element in andere Browser zu implementieren.[2]

Chrome hatte eine in-progress implementation, die das menu-Element in der Spezifikation hielt. Im Juni wurde dies jedoch entfernt und das Element wird mangels Browserunterstützung aus dem Standard entfernt.[3]

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

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.
Empfehlung: Für Kontextmenüs sollten Sie das ???-Element verwenden.

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: 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.[4].
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 öffnete sich im Firefox bei Rechtsklick ein modifiziertes Kontextmenü.
Update: Im Firefox 55 (Stand: September 2017) funktioniert das Beispiel nicht mehr.


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. Microsoft Edge Platform Status: menu element
  3. WHATWG: Remove <menuitem> and context menu specs #2730 vom 01.06.2017
  4. W3C: Rename <menu type=popup> to <menu type=context>