Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Einfaches Dropdown oder elegantes Styling

Navigation im Responsive Design – Teil I

Einfaches Dropdown oder elegantes Styling

Eine moderne Website berücksichtigt mobile Endgeräte. In vielen Fällen setzen Webworker dafür auf CSS3-Media-Queries, bekannt unter dem Begriff »Responsive Design«. Auch die Navigation wäre einfach mit CSS zu gestalten, gäbe es da nicht das Problem mit der Hover-Funktion auf Touchscreen-Geräten. Wer für die mobile Navigation einfach nur die geschachtelte Liste des Menüs sichtbar macht, sorgt für Benutzerfreundlichkeit. Ein optischer Leckerbissen ist das aber nicht. Glücklicherweise gibt es Alternativen.

Inzwischen setzen eine Menge Webangebote auf eine der unzähligen Varianten des Hover-Menüs à la Suckerfish. Doch diese sind auf Touch-Geräten nicht nutzbar. Also muss eine Lösung her, die auf SmartPhones und Tablets eine gute Figur macht.

Doppelte Menüführung

Die einfachste, aber nicht sehr elegante Methode ist die Verdoppelung des Menübaums. Für die Nutzung mit der Maus gibt es die bekannte geschachtelte Liste, die mit CSS als Klappmenü standardmäßig sichtbar wird. Für Touch-Bildschirme kommt ein Select-Menü zum Einsatz, das zunächst mit display:none ausgeblendet wird. Die CSS3-Media-Queries bestimmen dann, wann welches Menü angezeigt wird.

Vorteile:

  • Das normale Klappmenü kann wie gewohnt erstellt werden.
  • Select-Menüs funktionieren auf nahezu jedem Touch-Device mit »Bordmitteln«.
  • Es wird kein JavaScript benötigt.

Nachteile:

  • Select-Menüs lassen sich kaum mit CSS beeinflussen.
  • Jeder Browser stellt sie in seiner Optik dar.
  • Das Menü existiert doppelt in HTML.

Dropdown per JavaScript

Wenn CSS allein nicht rein, kommt JavaScript ins Spiel. In der bevorzugten, unaufdringlichen Form (»unobtrusive« genannt) ist JavaScript sehr effektiv und hinterlässt keine Spuren, wenn diese Funktion im Browser abgeschaltet ist. Möglich wäre also ein Select-Menü, das per JavaScript erzeugt wird. Eine Anleitung dazu bietet CSS-Tricks.

Vorteil:

  • Ohne JavaScript gibt es nur ein Menü.

Nachteil:

  • Bei eingeschaltetem JavaScript bleibt auch hier das Doppelpack im Quellcode sichtbar.

Elegante Variante

Wie wäre es, wenn die vorhandene Navigation für kleine Bildschirme quasi in eine handliche Schachtel gepackt würde? Im Klartext: Die normale, geschachtelte Liste bekommt einen Event-Button übergestülpt, der per JavaScript gesetzt wird. jQuery bietet dazu bereits die nötigen Funktionen und ist in den gängigen Content-Management-Systemen meist bereits vorhanden. Es reicht ein kleines Script, das die Toggle-Funktionen aktiviert und dem Button ein Click-Event hinzufügt.

Button zugeklappt
Button aufgeklappt

Auf ausreichend großen Bildschirmen kommt das normale Klappmenü nach Suckerfish-Vorbild zum Einsatz. Der Toggle-Button ist per display: none unsichtbar gemacht. Ist die in den CSS-Media-Queries festgelegte Mindestgröße unterschritten, wird der Button mit display: block sichtbar gemacht und das Menü zunächst ausgeblendet. Die nötigen CSS-Angaben übernimmt nun das JavaScript. Die Klick-Funktion toggelt das Menü und schaltet zwischen sichtbar oder unsichtbar hin und her. Fügt man der Funktion noch "slide-up" und "slide-down" aus dem jQuery-Vorrat hinzu, präsentiert sie den bekannten Slide-Effekt.

  1. showMenu = function (event) {
  2.     if (menu.is(":visible"))
  3.         menu.slideUp({complete:function(){$(this).css( 'display','' )}});
  4.     else
  5.         menu.slideDown();
  6. };

Die Anleitung mit Codebeispiel findet ihr bei danny-t.co.uk.

Vorteile:

  • Das Menü existiert nur einmal.
  • Es kann über die CSS-Media-Queries für kleinere Screens im Styling angepasst werden.
  • Platzsparend. Erst wenn das Menü gebraucht wird, ist es sichtbar.

Nachteil:

  • Kein Menü ohne JavaScript.

Fallback

Im Stylesheet steht das Menü jetzt auf display: none. Ohne die Hilfe von JavaScript ist die Seite nicht mehr navigierbar. Hier kann die Skript-Bibliothek Modernizr helfen. Sie überprüft alle unterstützten Features des genutzten Browser. So lässt sich u.a. feststellen, ob der Nutzer JavaScript eingeschaltet hat oder nicht. Modernizr setzt dann die Klasse "js" in das HTML-Tag. Darauf kann CSS problemlos zugreifen und die Angaben, die das Menü ein- oder ausblenden, auf die Klasse "js" beschränken. Der Link zur Skript-Bibliothek muss dazu im head-Bereich der Seite stehen. Wer JavaScript abschaltet, erhält dennoch ein intaktes Menü: Dieses ist dauerhaft eingeblendet und erfüllt seinen Zweck. Diese Methode kommt übrigens auch in obigem Beispiel zum Einsatz.

mobiles Menü dauerhaft ausgeklappt

Mehr Design fürs Menü

Wer sich nicht mit der einfachen Listenstruktur begnügen will, findet bei Filament Group eine Schritt-für-Schritt-Anleitung für ein mit Media-Queries und CSS gestyltes Menü. Auf den ersten Blick erscheint die Responsive-Navigation wie ein Dropdown. Hier ist der Toggle-Button so eingebunden, dass er dem Dropdown-Button in einem Select-Menü ähnelt.

Filament zugeklappt
Filament aufgeklappt

Die unterschiedlichen Bildschirmbreiten erhalten jeweils eine eigene Ansicht des Menüs. Einen Fallback gibt es auch hier. Der Toggle-Button ist auf dieselbe Weise eingebunden wie bereits oben beschrieben. Ohne JavaScript stehen die Menüzeilen über dem Inhalt.

Fazit

Mit wenigen Zeilen JavaScript lässt sich eine brauchbare Lösung für ein mobiles Menü erstellen. Ein paar Punkte sollten dabei aber unbedingt beachtet werden:

  • Immer eine Fallback-Lösung anbieten. Auch ohne JavaScript sollte das Menü mobil nutzbar sein.
  • Kein Inline-JS benutzen, sondern nur die im HTML verwendeten Klassen und IDs.
  • Mit JavaScript die innere Struktur des HTML-Markups, das Document Object Model (DOM) ansprechen.
  • Ein Link sollte ein Link bleiben. Außer dem Button mit der Klick-Funktion, sollten alle Links die normale a href-Struktur behalten, um immer die dazugehörige Seite aufrufen zu können. Auch unter SEO-Gesichtspunkten eine wichtige Prämisse.
  • Die Menüpunkte sollten zudem ausreichend groß sein, damit sie bequem auswählbar sind – und zwar einzeln.

Die ultimative Lösung ist wohl noch nicht geboren. Im Netz finden sich viele Varianten, die alle ihre Vor- und Nachteile haben.

Weitere Anregungen für die praktische Umsetzung:

Das Pattern Lab von Brad Frost zum Thema »Responsive Navigation«

Kommentare

Gunnar Bittersmann
am 03.12.2013 - 11:39

Die Wichtigkeit eines Menüs, das barrierefrei ist, auf kleinen Geräten funktioniert und das möglichst auch ohne JavaScript, kann nicht oft genug hervorgehoben werden.

Aber einige Anmerkungen hätte ich noch:

1.
Wenn man nicht sowieso schon Modernizr verwendet, wäre es unsinnig, die Bibliothek allein deshalb einzubinden, um dem html-Element eine Klasse "js" hinzufügen. Das erledigt man schnell per Einzeiler
<script>document.documentElement.classList.add("js");</script>

Oder wenn es auch in alten Browsers funktionieren muss, die classList noch nicht kennen:
<script>document.documentElement.className += " js";</script>
(Was den Nachteil hat, dass "js" auch dann nochmal hinzugefügt wird, falls es schon vorhanden sein sollte.)

Mit feature detection:
<script>if (document.documentElement.classList) document.documentElement.classList.add("js"); else document.documentElement.className += " js";</script>

Und ja, hier ist ausnahmsweise auch die Notation von JavaScript-Code direkt im HTML angebracht.

2.
Auf- und Zuklappeffekte lassen sich mit CSS realisieren. Zur Einsparung zusätzlicher Ressourcen kommt hinzu, dass diese ruckelfreier laufen dürften als mit JavaScript realisierte Effekte. Zum Aufklappen bspw. transition für max-height.

3.
Wenn man das JavaScript nur für moderne Browser braucht, muss es auch nicht immer jQuery sein. Natives JavaScript bietet mit querySelector / querySelectorAll bereits eine Selektor-Engine und das classList-Objekt die Methoden add, remove, toggle.

Permanenter Link
Renate Hermanns

Renate Hermanns (Autor)
am 03.12.2013 - 18:45

Danke Gunnar für die Skripte. Du hast natürlich Recht mit Modernizr und jQuery. Ich arbeite inzwischen fast ausschließlich mit Wordpress. Da ist jQuery standardmäßig an Bord.
Permanenter Link

Gerrit van Aaken
am 06.12.2013 - 20:14

Man benötigt für den Navigations-Aufklappbutton überhaupt kein JavaScript. Über den CSS-Pseudoselektor :target lässt sich das noch eleganter lösen.

Permanenter Link

Renate Hermanns
am 07.12.2013 - 17:14

Ja, stimmt. Und weil mir diese Lösung auch besser gefällt, habe ich auch darüber geschrieben: http://webkrauts.de/artikel/2013/navigation-im-responsive-design-teil-2

Permanenter Link

Manuel
am 13.12.2013 - 17:39

Haben doppelte Inhalte im HTML, sei es das Menü oder andere Elemente, welche man dann durch entsprechenden Media Queries anzeigt oder ausblendet eigentlich irgendwelche negativen Einflüsse? Auf Performance, Suchmaschinenoptimierungen oder sonst etwas? Die Performance sollte durch ein wenig HTML mehr ja nicht allzu leiden, oder?

Permanenter Link

Die Kommentare sind geschlossen.