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:
- Listen
- Toolbar-Menüs
- Kontext-Menüs
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ü
<form id="p_menu" method="get" action="/"> <menu type="toolbar"> <li> <menu label="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 label="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: Toolbar-Menü mit command-Elementen
<menu type="toolbar"> <command type="radio" radiogroup="lagerblock" checked="checked" label="Block A" icon="block-a.png" onclick="lv_set_block('A')"> <command type="radio" radiogroup="lagerblock" label="Block B" icon="block-b.png" onclick="lv_set_block('B')"> <command type="radio" radiogroup="lagerblock" label="Block C" icon="block-c.png" onclick="lv_set_block('C')"> <hr> <command 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"> <command label="Prüfen" onclick="pv_check_new_pn()"> <command label="Lagerplatz ermitteln" onclick="pv_get_spos_by_pn()"> <command label="Übernehmen" onclick="pv_pn_create()"> </menu> </form>
Erläuterung
Die Beispiele könnten in dieser Form aus dem web-basierten Frontend einer betriebswirtschaftlichen Anwendung stammen.
Listen-Menüs
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.
Toolbar-Menüs
Beispiel 2 ist HTML5-spezifisch und zeigt ein Toolbar-Menü. Als Toolbar-Menü zeichnen Sie ein Menü aus, indem Sie im einleitenden <menu>-Tag die Angabe type="toolbar" notieren.
Ein Toolbar-Menü, so definiert die HTML5-Spezifikation, ist ein interaktives Element, das dem Anwender jederzeit zur Verfügung steht, also dauerhaft angezeigt wird. 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 inneren 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 Anwendungsmöglichkeit für Toolbar-Menüs. In diesem Fall kommt ein mit HTML5 neu eingeführtes Element zum Einsatz: das command-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 command-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 command-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 command-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 <command type="radio"> oder <command type="checkbox"> mit dem Standalone-Attribut checked vorausgewählt (beim Seitenaufruf bereits aktiviert) werden.
Weitere Attribute für das command-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.
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 command-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
- Elementreferenz <command>
- Attributreferenz: type
- Attributreferenz: radiogroup
- Attributreferenz: label
- Attributreferenz: icon
- Attributreferenz: contextmenu
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und postet hier alles, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Denn das HTML5-Handbuch soll im Sinne seiner Leser weiterentwickelt werden. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.
Die Anzeigebeispiele sind anscheinend falsch verlinkt oder existieren nicht, siehe Fehlermeldung anbei (für Beispiel 1, für die anderen analog):
"Die Seite html-handbuch:beispiel-menues-1, auf die Sie zugreifen möchten, existiert nicht."
Grüße, Den
Die Anzeigebeispiele sollen ganz raus. Habe die Links jetzt mal auf dieser Seite entfernt. Es gibt sie aber auch noch auf anderen. Die kommen noch raus. Steht auf dem Todo :-)
Warum sollen die Anzeigebeispiele raus? Mit dem Beispielen hatte man immer gleich eine genau Vorstellung vom dem was der Code bewirkt.
MFG Matthias
Naja, vielleicht überlege ich mir's noch mal. Es ist halt so, dass es bei den meisten Beispielen Grafiken gibt, die zeigen, wie das Beispiel im Browser aussieht. Ich habe den Eindruck, als ob es den Leuten heute nicht mehr so wichtig ist als vor zehn Jahren, im eigenen Browser zu sehen, wie eine h1-Überschrift aussieht. Aber vielleicht täusche ich mich ja auch, was das betrifft. Vielleicht gibts dazu ja noch mehr Stimmen?
Ich habe gerade die Beispiele von dieser Seite im Opera 11.10 Browser ausprobiert wo diese auch richtig dargestellt werden (bis auf das 3, da erhalte ich nur ein Linie).
Dagegen ist die Darstellung im FF4 mehr als mangelhaft.
MFG Matthias
Hallo Stefan,
Auch wenn der Thread schon etwas älter ist: Bitte behalte die Anzeigebeispiele bei!
Die Beispiele zeichnen Selfhtml und das Html5-Handbuch vor anderen Referenzen aus. Auch wenn es sicherlich viel Arbeit für Dich bedeutet, spart es uns einiges an Durchprobiererei zum Look-and-Feel.
An dieser Stelle unbedingt ein Dickes Fettes Dankeschön für diese Referenzen!!!
MfG, Silke
Posting-Voranzeige:
Schließen der Vorschau