Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Komplexe Mobil-Navigation mit und ohne Javascript

Navigation im responsive Design – Teil II

Komplexe Mobil-Navigation mit und ohne Javascript

Bei Websites mit vielen Inhalten werden auch die Navigationen umfangreicher. Ein großes Menü, das auf dem Desktop optisch anspruchsvoll ausklappt, wirkt auf einem SmartPhone aber überladen und störend. Für solch komplexen Menüs braucht es also andere Lösungen im mobilen Bereich.

Menüstruktur

Ein übliches Hauptmenü, das auf dem Desktop übersichtlich aufklappt, lässt sich mit ein paar Zeilen JavaScript einfach in ein mobiles Menü verwandeln (siehe Teil 1: Einfaches Dropdown oder elegantes Styling). Bei größeren Auftritten mit mehr als 20 Unterseiten, wird solch ein einfach aufgeklapptes Listenmenü sehr lang. Sich durch ein solches Menü scrollen zu müssen, fördert nicht gerade die Übersicht. Spätestens jetzt muss die Menüstruktur für die mobile Verwendung überdacht werden.

Bereichsmenü
Das Menü wird schon kürzer, wenn Unterseiten nur für den aktiven Menüpunkt angezeigt werden. Denkbar ist auch, Haupt- und Unterpunkte nebeneinander anzuordnen, nach dem Vorbild des vertikalen Klappmenüs.
Mehrteiliges Menü
Das Untermenü lässt sich in mehrere Bereiche aufteilen. Jeder bekommt einen eigenen div-Container und eigenes Styling.

Bereichsmenü anzeigen

Ohne JavaScript zeigt ein Bereichsmenü die Unterseiten des aktiven Menüpunkts an. Dabei ist es egal, ob die Desktop-Version nur Hover-Menüs hat. Das statische Bereichsmenü lässt sich in den Media-Queries auch so definieren, dass es nur für die Smartphone-Breite gilt. Alle anderen Screenbreiten zeigen dann die Navigation mit Hover-Effekt. JavaScript ist dabei nur für einen Toggle-Button nötig, der das gesamte Menü ein- oder ausblendet (siehe Teil 1).

Alternativ kann das Menü nach dem Vorbild des horizontalen Klappmenüs angelegt werden: Das Untermenü positioniert sich jeweils rechts neben dem aktiven Hauptmenüpunkt. Längere Bezeichnungen in der Navigation sind dafür allerdings ungeeignet.

Das Menü wird kürzer, wenn nur das Untermenü im aktiven Navigationspunkt angezeigt wird.
Das Menü wird kürzer, wenn nur das
Untermenü im aktiven
Navigationspunkt angezeigt wird.
Das Menü wird noch kürzer, wenn Haupt- und Untermenü nebeneinander platziert sind.
Das Menü wird noch kürzer, wenn Haupt-
und Untermenü nebeneinander
platziert sind.

Mehrteiliges Menü

Vielleicht ist ja auch eine ganz andere Herangehensweise hilfreich, um komplexe Strukturen in den Griff zu bekommen und die Steuerzentrale »Menü« aus dem üblichen Kontext header + nav herauszuheben: Brad Frost spricht beispielsweise von »atomic Design«. Aus dieser Perspektive wäre das Menü ein »Organismus«, bestehend aus den Atomen li, dem Molekül der ungeordneten Liste ul und ggf. weiteren HTML-Elementen wie div und img.

Ein Beispiel für eine mobile Seite nach dieser Vorgehensweise beschreibt der Responsive Design Newsletter: Vorgestellt wird die mobile Seite von Entertainment Weekly. Das Menü ist sehr ansprechend und gut strukturiert. Es ist mit knapp einer Bildschirmhöhe auf dem Smartphone auch nicht zu lang und ermöglicht den Zugriff auf die Unterseiten auf einen Blick. Die sehr komplexen Inhalte strapazieren beim Laden auf dem Smartphone allerdings schon arg die Geduld des Nutzers.

Mobiles Menü auf dem Smart-Phone bei Entertainment Weekly
Mobiles Menü auf dem Smart-Phone
Auf dem Tablet erhält das mobile Menü zusätzlich Vorschaubilder.
Auf dem Tablet erhält das mobile Menü zusätzlich Vorschaubilder.

Ein Blick in den Quellcode zeigt: Die vier Menüelemente sind in der Hauptsache geschachtelte Listen, die teilweise in ein zusätzliches Div-Element gepackt wurden. Der Button oben rechts schaltet das Menü zwischen sichtbar und unsichtbar hin und her. Dieser »Toggle-Effekt« lässt sich wiederum mit einem kleinen JavaScript erzeugen. Die Navigation erhält je nach Status die Klasse "active" oder bleibt ohne. CSS schreibt für "active" dann opacity: 1 – ansonsten 0. Im Smartphone schiebt das Menü den Inhalt nach unten und die kleinen Vorschaubilder fallen weg. Größere Bildschirme zeigen die Bilder, und mit position: absolute liegt die Navigation über dem Inhalt.

Tablets ticken anders

Mobiles Menü angelegt, alles in Butter. Wirklich? Was sagen denn die Tablets und Touch-Screens dazu? Ein einzelner Knopf in Bildschirmbreite sieht selten schick aus und ist zudem gar nicht nötig. Die aktuellen Tablets mit einer Auflösung von 1280 Pixel Breite und mehr können durchaus die Menüleiste aus der Desktop-Ansicht nutzen.

Fatal wirkt sich hier das Menü mit Hover-Effekt aus: Das Untermenü lässt sich zwar aufklappen, die darin enthaltenen Menüpunkte sind allerdings nur kurz zu sehen und lassen sich nicht anklicken. Denn der geklickte Link im Hauptmenü ruft ohne Verzögerung einfach nur die zugehörige Seite auf. Die Unterpunkte sind nur für die kurze Zeit sichtbar, die die neue Seite zum Laden braucht. Das Menü klappt anschließend wieder zu, und die Prozedur des Aufklappens beginnt von vorne. Der User hat keine Chance, an die Links im Untermenü und deren Seiten heranzukommen. Dieser Missstand schreit nach einer Lösung: Das Menü müsste länger geöffnet bleiben, und der enthaltene Link dürfte nicht sofort die zugehörige Seite aufrufen.

Hier kommt das jQuery-Plugin superfish.js in Verbindung mit hoverIntent.js ins Spiel. Zusätzlich zu jQuery werden die beiden Plugins im head-Bereich oder vor dem schließenden </body>-Tag der HTML-Seite eingebunden. Eine CSS-Datei bringt superfish.js auch gleich mit. Mit wenigen Zeilen JavaScript ist Superfish initialisiert und ruft automatisch hoverIntent.js mit auf.

Superfish initialisieren

  1. <script>
  2.  
  3. jQuery(document).ready(function(){
  4.         jQuery('ul.sf-menu').superfish();
  5. });
  6.  
  7. </script>

Mit der Klasse .sf-menu wird das Wurzelelement der geschachtelten Liste gekennzeichnet. Superfish schreibt noch einige weitere Klassen in die Listenstruktur. Dazu gehören Anweisungen wie display: block und display: none, um das Untermenü ein- und auszublenden.

Optionen und Wirkweise

Mit knapp einem Dutzend Optionen lässt sich Superfish dem eigenen Bedarf anpassen, beispielsweise die Delay-Einstellung für die Zeit, die das Menü ohne Mausberührung geöffnet bleibt. Um das Menü nun nicht nur länger geöffnet zu halten, sondern auch die Unterpunkte klickbar zu machen, kommt "hoverIntent.js" ins Spiel. Es setzt jeweils zwei Zustände auf einen Menülink: Die erste Touch-Berührung klappt das vorhandene Untermenü auf, erst beim zweiten Mal wird der Link aktiviert. Zusammen mit einer ausreichend hohen Einstellung für die Verzögerung bleibt genügend Zeit, um die Unterpunkte zu berühren und beim zweiten Mal den enthaltenen Link auszuführen. Superfish ist übrigens nicht nur für Touch-Geräte konzipiert – auch die Hover-Menüs auf dem Desktop erhalten zusätzliche Funktionen wie sanftes Scrollen des Untermenüs.

Fallback

Der Anwender ohne JavaScript nutzt weiterhin den einfachen Klappeffekt des Hover-Menüs ohne sanftes Aufblenden. Hier ist Superfish nur ein »Nice-to-have«. Touchgeräte haben dann allerdings keine oder nur eine eingeschränkte Navigationsfunktion. Bei Tablets ist das Problem zu vernachlässigen, da ihre Nutzer meist die JavaScript-Unterstützung eingeschaltet haben. Aber es gibt noch Touch-Monitore und All-in-one-PCs. Ob man hier immer auf JavaScript setzen kann, ist fraglich.

Übrigens: Als begrüßenswerter Nebeneffekt von Superfish sind bei eingeschaltetem JavaScript die Dropdowns auf dem Desktop auch per Tastatur navigierbar.

Ohne Javascript - die Alternative mit :target

Einen völlig anderen Ansatz ohne JavaScript verfolgt Aaron Gustafson mit dem Einsatz des CSS3-Pseudoelements :target. Es kann prüfen, ob ein Anker gerade aktiv ist oder nicht und das Ziel entsprechend aktivieren. Dass der Internet Explorer dieses Pseudo-Element erst ab Version 9 unterstützt, ist im Hinblick auf mobile Plattformen zu vernachlässigen. Hier sind normalerweise die neueren Browser-Versionen im Einsatz. Sie unterstützen :target bereits so gut, dass es als Basis für eine alternative Lösung infrage kommt.

Aaron nutzt die Fähigkeiten des Pseudoelements, um ein zunächst unsichtbares Listenmenü zu öffnen. Das ist nichts anderes als der altbekannte Sprunglink, der schon immer das enthaltene Ziel anspringen konnte. Damit existiert auch gleich ein Fallback: Sollte :target nicht unterstützt werden, kann der Ankerlink das Menü direkt anspringen.

In diesem Fall wird die Navigation zunächst mit position:absolute an den Kopf der Seite positioniert und die enthaltenen Listenelemente mit height: 0 unsichtbar gemacht. Alle sonstigen CSS-Angaben, die eine Höhe aufspannen müssen natürlich auch auf 0 gesetzt werden. Erst mit :target bekommen die Menülinks ihre normalen Höhenmaße zurück.

Bei Aaron sieht das an dieser Stelle so aus:

  1. #nav a {
  2.       border-bottom-width: 0;
  3.       overflow: hidden;
  4.       height: 0;
  5.       line-height: 0;
  6.       padding: 0 1em;
  7.     }
  8. #nav:target a {
  9.       border-bottom-width: 1px;
  10.       line-height: 3em;
  11.       height: 3em;
  12.     }

Auch der Sprunglink steht am Kopf der Seite. Er enthält die ID des Menüs:

  1. <a id="jump" href="#nav">Navigation</a>

Wird der Link geklickt, erhalten die Elemente von #nav ihre normale Höhe und werden sichtbar. Das aktivierte Sprungziel erhält dabei einen höheren z-index und liegt damit auf der obersten Ebene. So weit so gut. Schließen lässt sich das Menü allerdings nicht mit dem Button. Die geniale Lösung: Das #nav-Element bekommt am unteren Ende einen zusätzlichen Listenpunkt mit einem »back-to-top«-Link. Aaron hat den Hintergrund des Backlinks transparent gemacht und ihn auf die gesamte Bildschirmfläche ausgedehnt. Ein Klick unter den Menü-Container entzieht ihm das :target und die Navigation schließt sich wieder. Der Rest ist CSS-Kosmetik. Aaron spendiert seinem Menü einen Slide-Effekt mit Transitions.

Genial auch, dass die Sprunglinks fürs Öffnen und Schließen nicht nur auf Touch-Screens funktionieren. Sie lassen sich auch mit der Tastatur ansteuern.

:target im Offscreen

David Bushell setzt dem Ganzen noch eins drauf. Im Smashingmagazine beschreibt er detailliert und anhand mehrer Beispiele ein sogenanntes Offscreen-Menü, das auf der oben beschriebenen Methode basiert. Bei Touch-Devices sind Offscreen-Elemente, die sich nach rechts oder links aus dem Viewport herausschieben lassen, nichts Ungewöhnliches.

Im Prinzip ist der Aufbau derselbe wie der von Aaron. Nur platziert David einen sichtbaren Backlink im Menü-Container. Im aktivierten Zustand verdeckt das Menü aufgrund des höheren z-index den Startlink. Dem Nutzer präsentiert sich so das gewohnte Verhalten eines Toggle-Menüs.

Der Menü-Container ist geschlossen, nur der Button zum Öffnen ist sichtbar.
Der Menü-Container ist geschlossen, nur
der Button zum Öffnen ist sichtbar
Das geöffnete Menü mit dem Button zum Schließen, der anstelle des Öffnen-Buttons eingeblendet wird.
Das geöffnete Menü mit dem Button zum
Schließen, der anstelle des
Öffnen-Buttons eingeblendet wird

Um das Menü in den Viewport zu verschieben und wieder zurück, wird das schon mehrfach erwähnte JavaScript für die Toggle-Funktion eingesetzt. Der Clou ist allerdings der Einsatz der CSS3-Eigenschaften transform und transition für das sanfte Gleiten. Modernizr prüft, ob der genutzte Browser diese Eigenschaften unterstützt. Falls nicht, bleibt es bei dem zuvor beschriebenen Screen-Menü. Diese Lösung setzt bis auf die Toggle-Funktion völlig auf CSS. David erwähnt auch, dass die CSS-Lösung für Transitions wesentlich schneller arbeitet als die Alternative mit jQuery und zeigt einen Geschwindigkeitstest.

Fazit

Alle diese Ansätze sind brauchbar und gar nicht so schwierig in ihrer Umsetzung. Die Kodierung mobiler Menüs ist kein Hexenwerk. Allerdings erfordern gerade komplexe Menüstrukturen unbedingt präzise Vorarbeit in der Konzeptionsphase. Gewisse Bereiche einfach auszublenden, um das Menü »genießbarer« zu machen, hinterlässt nur enttäuschte Besucher. Und das Bereichsmenü, das aus vielen Auftritten inzwischen »weggehovered« wurde, hat mobil durchaus seine Berechtigung.

Vielversprechend sind die Ansätze mit reinem CSS, die ein Mehr an Usability versprechen. Die große Herausforderung dürfte darin bestehen, die Hochglanzoptik mit der Benutzbarkeit zu verbinden.

Kommentare

Eric Eggert
am 04.12.2013 - 09:30

Hallo, kurze Anmerkung: :target ist kein Pseudoelement (wie ::before und ::after) sondern ein Pseudo-Klassen-Selektor (wie :hover und :link).

Permanenter Link

Die Kommentare sind geschlossen.