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]

[Bearbeiten] menuitem

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.

[Bearbeiten] Siehe auch

[Bearbeiten] Weblinks

  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


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML