Schaut man sich die Working-Drafts des W3C mal etwas genauer an, stößt man ab und zu auf sehr interessante Neuheiten. So befinden sich momentan zwei neue HTML-Tags in der Entwicklungsphase, die es einem Entwickler ermöglichen, ausklappbare Menüs zu realisieren und das alles ohne eine Zeile JavaScript.

Klappmenu bei OS X

Eine solche Menüstruktur ist uns allen von Apples Betriebssystem OS X geläufig (wie hier der Dateiinformationen-Dialog). Es gibt bereits viele jQuery-Lösungen, um ein solches Menü auf einer Webseite umzusetzen, nur schöner ist es eben, wenn man das auch ohne JavaScript verwirklichen kann.

HTML 5 ruft hierfür zwei neue Tags ins Leben. Zum einen <details> und zum anderen <summary>.

<details> verhält sich ähnlich, wie das <form>-Tag. Es leitet diese Menüart ein. <summary> hingegen, ist zu vergleichen mit dem <label>-Tag und repräsentiert die oberste Ebene des Menüs. Mit Hilfe einer ungeordneten Liste wird das Untermenü definiert.

Die Syntax zum Aufbau eines solchen Menüs sieht also wie folgt aus:

<details>
    <summary>Ein Menü zum ausklappen</summary>
    <ul>
        <li><a href="#" title="#">Link 01</a></li>
        <li><a href="#" title="#">Link 01</a></li>
        <li><a href="#" title="#">Link 01</a></li>
    </ul>
</details>

 

Randnotiz:
Da es sich bei diesen Tags noch um einen Working-Draft im sehr frühen Stadium handelt, werden sie momentan lediglich von -webkit- basierten Browsern (Safari, Chrome) unterstützt.

Ich habe mir mal die neuen Möglichkeiten angesehen und ein wenig damit rum gespielt. In Kombination mit ein paar CSS 3 Transitions kann man lustige Effekte damit erzielen. Hier mal eine kleine Demo:

aufklappbares HTML 5 Menü

Ich kann mir diese neuen Tags gerade in Verbindung mit Navigations-Menüs für mobile Geräte vorstellen. Gerade in diesem Bereich sind führt es garantiert zu besseren Ladezeiten, wenn hinter einem Menü kein jQuery-Script steht, sondern nur ein einfaches HTML-Tag.

Links zu diesm Artikel: