Menüs

Das hier beschriebene menu-Element gehört zum Urbestand von HTML, wurde jedoch nur selten verwendet. HTML5 versucht diesem Element neues Leben einzuhauchen und definiert eine Reihe konkreter Anwendungsmöglichkeiten. Grundsätzlich unterscheidet HTML5 folgende Menütypen:

  • Toolbar-Menüs
  • Popup-Menüs

Toolbar-Menüs sind dauerhaft sichtbare Menüs nach dem Vorbild von Menüzeilen oder Werkzeugleisten in Anwendungsfenstern.

Popup-Menüs sind ein-/ausblendbare Menüs, die den dauerhaft sichtbaren Inhalt überlappen. Dabei handelt es sich entweder um Aufklappmenüs als Untermenüs zu einem Menü des Typs Toolbar, oder um frei schwebende Kontextmenüs, wie sie typischerweise durch Klicks mit der rechten Maustaste erzeugt werden.

Dabei können die Menüs aus ganz unterschiedlichen Inhalten bestehen. Die nachfolgenden Beispiele zeigen einige dieser Varianten.

Beispiel 1: Einfaches Listenmenü

<menu>
<li><a href="javascript:pv()">Produktverwaltung</a></li>
<li><a href="javascript:lv()">Lagerverwaltung</a></li>
<li><a href="javascript:kv()">Kundenverwaltung</a></li>
<li><a href="javascript:mv()">Materialverwaltung</a></li>
</menu>

Beispiel 2: Toolbar-Menü mit Aufklappmenüs

<form id="p_menu" method="get" action="/">
  <menu type="toolbar">
    <li>  
      <menu type=“popuplabel="Produkte">
        <select name="products" 
               onchange="document.getElementById('p_menu').submit();">
          <option value="p_add">Neues Produkt</option>
          <option value="p_list">Produkte suchen/auflisten</option>
        </select>
      </menu>
    </li>
    <li>
      <menu type=“popuplabel="Produktgruppen">
        <select name="product_groups" 
             onchange="document.getElementById('p_menu').submit();">
          <option value="pg_add">Neue Produktgruppe</option>
          <option value="pg_list">Produktgruppen auflisten</option>
        </select>
      </menu>
    </li>
  </menu>
</form>

Beispiel 3: Popup-Menü mit menuitem-Elementen

<menu type="popup">
  <menuitem type="radio" radiogroup="lagerblock" checked="checked" 
           label="Block A" icon="block-a.png" 
           onclick="lv_set_block('A')">
  <menuitem type="radio" radiogroup="lagerblock" 
           label="Block B" icon="block-b.png" 
           onclick="lv_set_block('B')">
  <menuitem type="radio" radiogroup="lagerblock" 
           label="Block C" icon="block-c.png" 
           onclick="lv_set_block('C')">
  <hr>
  <menuitem type="command" 
           label="Zuordnen" icon="assign.png" 
           onclick="lv_assign_to_block()">
</menu>

Beispiel 4: Kontext-Menü

<form name="product_add">
   <label>
     Produktnummer:<br> 
     <input name="pn" type="text" contextmenu="pn_context">
  </label>
  <menu type="context" id="pn_context">
    <menuitem label="Prüfen" onclick="pv_check_new_pn()" icon="src/lager.png">
    <menuitem label="Lagerplatz ermitteln" 
             onclick="pv_get_spos_by_pn()" icon="src/lager.png" disabled>
    <menuitem  command="submitbutton">
  </menu>
  <p><input type=“submitid=“submitbuttonvalue=“Übernehmen></p>
</form>

Erläuterung

Die Beispiele könnten in dieser Form aus dem web-basierten Frontend einer betriebswirtschaftlichen Anwendung stammen.

Beispiel 1 zeigt ein einfaches Listenmenü, wie es in dieser Form seit HTML-Version 2.0 erlaubt ist. Der Aufbau entspricht dem einer ungeordneten Liste, mit dem Unterschied, dass die Liste, markiert durch li-Elemente mit <li>…</li> für jedes Listenelement, durch ein menu-Element, markiert durch <menu>…</menu>, eingeschlossen wird (li = list item = Listeneintrag). Der andere Unterschied besteht darin, dass ein Menü von der Bedeutung her stets aus interaktiven oder ausführbaren Einträgen bestehen sollte. Das können, wie in Beispiel 1, einfache Hyperllinks sein.

Ein einfaches Listenmenü wie im Beispiel wird von HTML5 als Menü des Typs Toolbar interpretiert, ist also dauerhaft sichtbar.

Toolbar-Menüs

Nicht selten ist ein Toolbar-Menü eine größere, hierarchische Menüstruktur. Deshalb darf das menu-Element, wie in Beispiel 2 gezeigt, verschachtelt werden. Im Beispiel wird das äußere menu-Element als Toolbar-Menü definiert. Es besteht aus zwei Listeneinträ­gen. Jeder Listeneintrag enthält ein komplettes Untermenü. Untermenüs können mit Hilfe des Attributs label eine Beschriftung erhalten. Die Untermenüs werden im Beispiel durch die Angabe type=“popup“ explizit als nicht dauerhaft angezeigte Popup-Menüs definiert. Der Inhalt des Menüs wird also erst beim Anklicken des Menü-Labeltextes eingeblendet.

Die inneren Popup-Menüs zeigen die erweiterten Möglichkeiten, die HTML5 für das menu-Element vorsieht. Entscheidend ist, dass die Menüeinträge interaktive Elemente sind, mit deren Hilfe der Anwender etwas erreichen kann. Deshalb sind auch Formularelemente zugelassen. In Beispiel 2 werden Auswahllisten verwendet, um die Menüeinträge zu realisieren.

Das Menü in Beispiel 2 ist übrigens Teil eines Formulars. Durch den Event-Handler {onchange} und die zugewiesene JavaScript-Anweisung document.getElementById('p_menu').submit(); wird das Formular abgesendet, wenn der Anwender einen Eintrag aus einer der Auswahllisten auswählt. Das verarbeitende Script auf dem Server bekommt dann den Namen der Auswahlliste und den value-Wert des ausgewählten Eintrags übergeben.

Beispiel 3 zeigt eine weitere Ausprägung eines Popup-Menüs, wie es in dieser Form z.B. als inneres Menü eines übergeordneten Toolbar-Menüs vorkommen könnte. In diesem Fall kommt ein mit HTML5 neu eingeführtes Element zum Einsatz: das menuitem-Element. Es handelt sich um ein Standalone-Tag, das die Aufgabe hat, einen „Befehl auszuführen“. In der Regel ist das ein JavaScript-Aufruf.

Wie das menuitem-Element aussieht und sich verhält, wird ähnlich wie beim input-Element über ein type-Attribut festgelegt. Es kann die Werte command, radio und checkbox erhalten oder ganz weggelassen werden, so wie im obigen Beispiel 4. Wenn es fehlt, wird der Wert command angenommen.

Zur Visualisierung des command-Status im Browser trifft die HTML5-Spezifikation keine Aussage.

Die Typen radio und checkbox werden einfach so wie gewöhnliche Radiobuttons und Checkboxen dargestellt. Der Unterschied zu gewöhnlichen Radiobuttons und Checkboxen besteht darin, dass beim menuitem-Element in aller Regel der Event-Handler {onclick} eingesetzt wird. Er bewirkt, das bei jeder Zustandsänderung des Radiobuttons oder der Checkbox JavaScript-Code ausgeführt wird.

Beim command-Typ radio ist zu beachten, dass das Attribut radiogroup eine Gruppe von alternativen Radiobuttons definiert, von denen genau einer aktiviert sein kann. Notieren Sie das radiogroup-Attribut wie im obigen Beispiel 3 in allen menuitem-Elementen einer Gruppe von radio-Typen, und weisen Sie ihm in allen Fällen den gleichen Namen zu.

Genauso wie bei gewöhnlichen Radiobuttons und Checkboxen kann ein Element <menuitem type="radio"> oder <menuitem type="checkbox"> mit dem Standalone-Attribut checked vorausgewählt (beim Seitenaufruf bereits aktiviert) werden.

Weitere Attribute für das menuitem-Element sind die Attribute label und icon. Das Attribut label legt die Beschriftung des Kommandos fest. Anders als bei gewöhnlichen Radio- und Checkboxen notieren Sie die Beschriftung bei Kommandos also nicht im Anschluß an das Element als normalen Text, sondern als Wertzuweisung an das Attribut label.
Dem Attribut icon kann eine kleine Symbolgrafik zugeordnet werden, die das Kommando optisch verdeutlicht. Dabei gelten alle Möglichkeiten und Regeln bei der Referenzierung. Wenn beide Attribute, also label und icon angegeben sind, kann ein Browser der Beschriftung beispielsweise das Icon voranstellen.

Kontext-Menüs

Beispiel 4 ist HTML5-spezifisch und zeigt ein Kontext-Menü. Ein solches Menü zeichnen Sie aus, indem Sie im einleitenden <menu>-Tag die Angabe type="context" notieren.

Kontext-Menüs benötigen ein Element, auf das sie sich beziehen. Im obigen Beispiel 4 ist dies das einzeilige Eingabefeld <input name="pn" type="text" contextmenu="pn_context">. Den Bezug stellen Sie her, indem Sie im einleitenden <menu>-Tag des Kontext-Menüs ein id-Attribut notieren und dabei einen dokumentweit eindeutigen Namen vergeben. Im Bezugselement, oben im Beispiel also im <input>-Element, notieren Sie ein Attribut contextmenu. Diesem Attribut weisen Sie den gleichen Namen zu. Im obigen Beispiel ist das der Name pn_context. Achten Sie auf exakte Übereinstimmung der Namensschreibweisen im contextmenu- und im id-Attribut.

Das Kontext-Menü wird nur dann angezeigt, wenn der Anwender es explizit aktiviert, z.B. durch Drücken der rechten Maustaste im Bereich des Bezugselements.

Beispiel 4 zeigt auch noch eine weitere Verwendungsmöglichkeit des menuitem-Elements. In Verbindung mit dem command-Attribut lässt sich das Element nutzen, um einen Befehl auszuführen, der an anderer Stelle auf der Webseite definiert ist. Dem command-Attribut wird dabei der id-Name des Elements zugewiesen, das den Befehl ausführt. Im Beispiel ist das der id-Name des Submit-Buttons des Formulars.

Wenn ein menuitem-Element ein command-Attribut enthält, darf es übrigens keine weiteren Attribute enthalten. Der Menütext ergibt sich aus der Beschriftung oder dem Elementinhalt des Elements, auf das der command-Eintrag verweist. Im Beispiel „erbt“ das menuitem-Element als sichtbares Label also den Wert übernehmen, da dies der sichtbare Wert des Submit-Buttons ist, auf den verwiesen wird.

Weitere Hinweise

Das menu-Element sollte nicht für normale Website-Navigationen verwendet werden. Realisieren Sie solche Navigationen mit dem nav-Element und ungeordneten Listen (siehe Buchabschnitt Navigation und Seitenleisten). Die Einträge eines menu-Menüs sollten stets Aktionen auslösen und deshalb in der Regel entsprechende Event-Handler mit zugewiesenem JavaScript-Code enthalten.

Zum Redaktionszeitpunkt existierte noch keine Browser-Umsetzung der neuen HTML5-Erweiterungen zu menu. Das menuitem-Element bleibt in Browsern, die das Element nicht kennen, vollständig unsichtbar, da es ein Standalone-Element ohne Inhalt ist. Es wird deshalb noch dauern, bis diese Möglichkeiten bedenkenlos und ohne zusätzliche Workarounds eingesetzt werden können.

Referenzinformationen

HTML2 XHTML1 MSIE FFOX CHROME SAF OP
HTML5 XHTML5 FFOX19.0
HTML5 XHTML5

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License