Responsive Navigationen mit mehreren Menüebenen

Als Erweiterung zu meinem Artikel im T3N-Magazin Ausgabe 32 möchte ich hier noch konkreter auf das Thema komplexer, mehrstufiger Navigationen eingehen.

In den meisten Seiten beschränkt sich die Navigation auf eine Hauptmenüebene und eine weitere Ebene als Subnavigation. Dieses ist über responsive Navigationen relativ leicht abzubilden. Siehe hierzu auch meinen entspr. Blogeintrag und den erwähnten T3N-Artikel.

Sobald die Websites aber über sehr viele Seiten verfügen und somit mehrere Menüebenen entstehen, stellt sich die Frage, wie solche Sub-Ebenen geschickt auf kleinen Devices erreichbar gemacht werden können.

In der Desktop-Ansicht können wir Subnavigation z.B. durch das Mouseover-Event anzeigen lassen. Leider gibt es den Mouseover-Zustand auf Touch-Devices nicht.

Will man die Subnavigation über einen Klick-Event öffnen, ergibt sich zunächst das Problem, das der Hauptmenüpunkt in den meisten Fällen bereits mit einem eigenen Link hinterlegt ist. Die entspr. Seite wäre also, würde man den Klick für das öffnen der Subnavi verwenden, nicht mehr zu erreichen. Im Idealfall aber sollte man sowohl die Folgeseite des Menüpunkts erreichen, als auch die Subnavigation per Klick öffnen können.

Im folgenden möchte ich Euch 2 mögliche Lösungsansätze vorstellen:

Submenü über zusätzlichen Button

In dieser Variante habe ich ein Javascript (jQuery) eingebunden, dass zunächst überprüft, ob ein Menüpunkt eigene Unterpunkte enthält.

Ist dieses der Fall, wird ein zusätzlicher Button (in diesem Fall ein Pfeil-Symbol) neben den Menüpunkt gesetzt, der zum einen erkennbar macht, dass noch Unterpunkte vorhanden sind, und zum anderen dazu dient, eben diese Subnavigation zu öffnen. Zusätzlich kann bei Klick auf den eigentlich Menüpunkt, dessen Folgeseite weiterhin problemlos erreicht werden.

Es sollte wie immer darauf geachtet werden, dass der klickbare Bereich (in diesem Fall das Pfeil-Symbol) groß genug ist, damit er problemlos mit dem Finger bedient werden kann.

zur Demoseite

Umfunktionieren des Hauptmenüpunktes

Eine weitere Möglichkeit besteht darin, dem Hauptmenüpunkt seinen Link zur Folgeseite zunächst zu entziehen. Damit aber die Folgeseite trotzdem erreichbar ist, kann der Hauptmenüpunkt via (z.B.) jQuery als erster Punkt in der Subnavigation platziert werden. Hebt man diesen viell. optisch hervor und erweitert den Menütext z.B. um den Begriff “Übersicht” (je nach Inhalt), so kann der User weiterhin die entspr. Hauptseite erreichen.

zur Demoseite

Aus meiner Sicht ist es immer wichtig, dem User einen Folgeseite für die Hauptmenüpunkt zur Verfügung zu stellen. Der User erwartet zum einen, dass sich hinter dem Menüpunkt eine Seite befindet. Zudem kann hier nochmal sinnvoller Content platziert werden. Als letztes dient eine solche Seite zur Not auch als Fallback, falls z.B. aufgrund von deaktiviertem Javascript eine Subnavigation nicht erreicht werden kann. Dieses Problem ist z.B. auf der ansonsten sehr schön umgesetzten Seite von Sony (USA) zu sehen.

Die Idee, wie sich die Subnavigation hier auf kleinen Devices einblendet ist zwar sehr elegant gelöst, allerdings kann ich bei fehlendem Javascript die komplette Navigation nicht mehr benutzen.
http://www.sony.com/index.shtml (nur zu sehen in der USA-Version).