HTML5-Handbuch - die neuen Features von HTML5

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 Beispiel 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 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 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, dass 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

oder

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 Anschluss 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.
Beispiel 4 ist HTML5-spezifisch und zeigt ein Kontext-Menü. Ein solches Menü zeichnen Sie aus, indem Sie im einleitenden

-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

. Den Bezug stellen Sie her, indem Sie im einleitenden

-Tag des Kontext-Menüs ein
id
-Attribut notieren und dabei einen dokumentweit eindeutigen Namen vergeben. Im Bezugselement, oben im Beispiel also im

-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 Befehlausführt. Im Beispiel ist das