HTML5-Handbuch - die neuen Features von HTML5

Elemente haben keinen direkten Bezug zu Formularen. Mit Formularelementen haben sie jedoch gemeinsam, dass der Anwender etwas mit ihnen tun kann.
8.6.1      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ü
    
    

Produktverwaltung

    

Lagerverwaltung

    

Kundenverwaltung

    

Materialverwaltung

    
Beispiel 2: Toolbar-Menü mit Aufklappmenüs
    

    
    

    
        onchange="document.getElementById('p_menu').submit();">
    Neues Produkt
    Produkte suchen/auflisten
    
    
    

    

    
        onchange="document.getElementById('p_menu').submit();">
    Neue Produktgruppe
    Produktgruppen auflisten
    
    
    

    
    

Beispiel 3: Popup-Menü mit menuitem-Elementen
    
        label="Block A" icon="block-a.png"
    onclick="lv_set_block('A')">
        label="Block B" icon="block-b.png"
    onclick="lv_set_block('B')">
        label="Block C" icon="block-c.png"
    onclick="lv_set_block('C')">
    

---

        label="Zuordnen" icon="assign.png"
    onclick="lv_assign_to_block()">
    
Beispiel 4: Kontext-Menü
    

    
    Produktnummer:

    
    
    
        icon="src/lager.png">
        onclick="pv_get_spos_by_pn()" icon="src/lager.png"
    disabled>
    
    
    

    

Erläuterung
    Die Beispiele könnten in dieser Form aus dem webbasierten 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

…

für jedes Listenelement, durch ein
menu
-Element, markiert durch

…

, 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 Hyperlinks sein.
    Ein einfaches Listenmenü wie im Beispiel wird von HTML5 als Menü des Typs Toolbar interpretiert, ist also dauerhaft sichtbar.
    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