Im Internet findet man eine Reihe von Vorschlägen, wie man mit CSS auch ohne Javascript geschachtelte Menüs erzeugen kann, so wie wir sie vom Desktop kennen (vgl. http://meyerweb.com/eric/css/edge/menus/demo.html, http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ oder http://nekkidblogger.com/2011/ultra-efficient-css-html-drop-menu-nekkidblogger-menu/ ). Wenn man allerdings damit eine Web-Anwendung entwickelt möchte, stößt man auf eine Reihe von Problemen.
Einige Lösungen setzen auf CSS3 Funktionen, die noch nicht von allen Browsern unterstützt werden. Es ist aber fatal, wenn das Menü nicht verwendet werden kann, weil Einträge nicht sichtbar sind.
Das Aufklappen von Dropdown- und Flyout-Menüs wird in allen Lösungen durch den "hover" Effekt ausgelöst. Dieser wird vom Mauszeiger ausgelöst. Wer keine Maus hat (Benutzer von Mobiltelefonen, Tablets) kann das Menü womöglich nicht bedienen. Dazu kommt, dass ältere Browser wie der Internet Explorer 6 hover-Effekte nur für den <a> Tag unterstützt. Man kommt dann für diesen Browser nicht ohne Javascript aus. Benutzer, die aus Sicherheitsgründen Skripte deaktiviert haben, können die Anwendung dann nicht bedienen.
Die Menüaktion wird durch einen Hyperlink ausgelöst. Das ist für statische Webseiten OK, aber in Web-Anwendungen unerwünscht, weil Benutzereingaben verloren gehen können.
Keine Menü-Lösung ohne Javascript möglich? Doch! Allerdings ist ein etwas anderer Lösungsansatz erforderlich. Darüber werde ich im nächsten Blog berichten.
