Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Große Menüs, kleine Bildschirme: Responsive, Multi-Level-Navigation

by
Difficulty:AdvancedLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wenn Sie jemals auf einer reaktionsschnellen Website gearbeitet haben, müssen Sie zweifellos eines der kniffligsten Probleme in diesem aufstrebenden Bereich angehen: Navigation.  Für eine einfache Navigation können die Lösungen einfach sein.  Wenn Sie jedoch an etwas Komplexem arbeiten, vielleicht mit mehreren verschachtelten Listen und Dropdown-Listen, kann eine drastischere Neuanordnung angebracht sein.

Bei diesem Ansatz zur reaktionsschnellen Navigation verwenden wir einen Ansatz, der große, mehrstufige Navigationsmenüs unter Verwendung von Medienabfragen und jQuery aufnehmen kann, während gleichzeitig versucht wird, unser Markup einfach und unsere externen Ressourcen minimal zu halten. 

Das Ziel: Responsive Dropdown-Menü 

Folgendes streben wir an: 

Goal
  • Zeigen Sie auf größeren Bildschirmen ein horizontales Dropdown-Menü mit bis zu 2 Ebenen von Untermenüs an, die angezeigt werden, wenn sich das übergeordnete Element über dem Bildschirm befindet. 
  • Auf kleineren Bildschirmen eine "Menü" -Taste, die unser Menü vertikal anzeigt und Untermenüs anzeigt, wenn das Elternelement angeklickt / berührt wird. 

Schritt 1: Das Markup 

Unser Markup ist eine ziemlich unkomplizierte ungeordnete Liste mit verschachtelten Listen, die in Listenelementen enthalten sind.  Ich verwende absichtlich keine Klassen oder IDs für ein Element außer der übergeordneten ungeordneten Liste, damit das Menü mit CMS-generierten Menüs kompatibel ist. 

Schritt 2: Grundlegendes Styling 

Lassen Sie uns ein paar grundlegende Stile hinzufügen, damit unsere Liste wie eine Navigationsleiste aussieht: 

step 2

Wir haben gerade unsere Listenelemente in eine horizontale Linie geschwenkt, einige Farben eingestellt und die Untermenüs mit absoluter Positionierung vom Bildschirm ausgeblendet.  Wenn Sie sich über Zeile 20 wundern, ist es eine einfache Clearfix-Methode, die ich in solchen Situationen als effektiv empfinde (lesen Sie mehr auf Nicolas Gallaghers Blog). 

Schritt 3: Horizontales Dropdown-Menü

Lassen Sie uns als Nächstes die horizontalen Dropdown-Menüs aufrufen.  Während dies mit reinem CSS unter Verwendung des Pseudo-Selektors :hover geschehen könnte, werde ich es mit JavaScript hinzufügen, da wir die Menüs wechseln werden, um sie beim Klick in unserer Small-Screen-Version zu aktivieren. 

Da wir absolute Positionierung verwenden, um unsere Untermenüs vom Bildschirm zu entfernen, fügen wir einige .hover-Regeln hinzu, die die Untermenüs relativ zu ihren Eltern positionieren, wenn die .hover-Klasse vorhanden ist (auf die wir mit jQuery achten werden).

Jetzt fügen wir einige einfache jQuery-Zeilen hinzu, um die .hover-Klasse hinzuzufügen, um Elemente aufzulisten, wenn sie sich darüber bewegen. 

step 3

Und genau so haben wir ein funktionales, mehrstufiges Dropdown-Menü. 

Schritt 4: Vertikales Dropdown-Menü 

Unser hübsches horizontales Dropdown-Menü sieht auf mobilen Bildschirmen leider ziemlich winzig aus. Stellen Sie daher sicher, dass mobile Browser vollständig gezoomt werden, wenn sie unsere Seite laden, indem Sie das Viewport-Meta-Tag hinzufügen. 

Natürlich sieht unser Dropdown-Menü auf Mobilgeräten noch schlechter aus und das meiste passt nicht einmal auf den Bildschirm!  Fügen wir einige Medienabfragen hinzu, um unsere Liste in eine vertikale Liste unter unserem Haltepunkt zu stylen.  Unser Haltepunkt wird durch den Punkt bestimmt, an dem unser Menü in zwei Zeilen aufreißt, in meinem Fall sind das ungefähr 800 Pixel.

An unserem Haltepunkt entfernen wir die Gleitkommazahlen und setzen di  Listenelemente und ungeordneten Listen auf width: 100%.  Wenn wir jetzt über unsere übergeordneten Elemente zeigen, werden ihre untergeordneten Listen über den darunter liegenden Elementen angezeigt.  Wir möchten lieber, dass die anderen Top-Level-Listenelemente verschoben werden.  Anstatt also die linke Position der ungeordneten Liste zu ändern, setzen wir einfach den Positionswert auf statisch

step 4

Schritt 5: Konvertieren von Hover in Click 

Da Sie (noch) nicht auf einem Touchscreen verweilen können, erstellen wir einen bedingten Code, um die Breite des Fensters zu überprüfen, und schreiben dann den Code, um die Ereignisse click () und hover () festzulegen. 

Für das Click-Ereignis mussten wir das Zielelement vom Listenelement zum übergeordneten Element ändern, da die Listen verschachtelt sind und das Klicken auf ein Listenelement auch dessen Enkel öffnen konnte.  Das Problem bei dieser Änderung besteht jedoch darin, dass beim Klicken auf ein Anker-Tag die Seite erneut geladen wird. Wir können jedoch das Standardverhalten für alle Anker-Tags, die Nachkommen von Listenelementen sind, nicht verhindern. 

Um dies zu beheben, fügen wir ein kurzes Stück jQuery hinzu, um die Klasse parent zu einem Listenelement hinzuzufügen, dessen untergeordneter Anker Geschwister hat, und dann nur diese Anker zu targetieren (wiederum, um unser Markup flexibel zu halten). 

Schritt 6: Schaltet das Menü um

Unsere Speisekarte sieht jetzt auf Mobilgeräten ziemlich gut aus, aber sie benötigt ziemlich viel wertvollen Bildschirmplatz.  Ein beliebter neuer Ansatz bestand darin, Navigationslisten über eine Schaltfläche umzuschalten, normalerweise mit dem Wort "Menü" oder einem Menüsymbol.  Lassen Sie uns unseren Toggle-Link verwenden, um unsere Navigationsliste nur anzuzeigen, wenn Sie darauf klicken. 

step 6

Schritt 7: Etwas mehr Stil 

Da unsere übergeordneten Listenelemente jetzt auf eine Klasse ausgerichtet sind, fügen Sie einen kleinen Abwärtspfeil hinzu, damit unsere Nutzer wissen, welche Listenelemente untergeordnete Elemente enthalten. 

step 7

Bonus: Angeber 

Jetzt, für praktische Zwecke, funktioniert dieses Menü ziemlich gut.  Wenn Sie es in einem mobilen Browser öffnen, erhalten Sie eine sehr nützliche vertikale Akkordeon-Liste. Wenn Sie sie in Ihrem Desktop-Browser öffnen, erhalten Sie eine schöne horizontale Dropdown-Liste. Wenn Sie die Größe Ihres Desktop-Browsers jedoch auf die Breite von Mobilgeräten ändern, funktioniert unsere Navigation nur noch mit dem Mauszeiger, und das Menü wird nicht mit der Umschaltfunktion ausgeblendet.  Für die meisten Anwendungen ist das in Ordnung.  Schließlich greift ein durchschnittlicher Webseitenbesucher nicht an den Rand seines Browsers und beginnt wild hin und her zu ziehen.

Wenn Sie jedoch Ihre Kollegen im Web beeindrucken wollen, wird dies nicht ausreichen.  Wir müssen unser Skript so einrichten, dass es auf das Resize-Ereignis reagiert, und unseren bedingten Code ausführen, wenn die Größe des Browsers unterhalb des Breakpoints geändert wird.  Wir erweitern den Code, der in dem hervorragenden Tutorial "Mobile-First-Responsive-Design erstellen" vorgestellt wurde, und setzen einige Variablen, um unsere Browser-Breite zu verfolgen und zu aktualisieren. 

Schritt 8: Fenster Ereignisse 

Da wir die Breite des Browsers sowohl beim Laden der Seite als auch bei der Größenanpassung des Browsers überprüfen möchten, beginnen wir damit, den bedingten Code aus dem $ (document) .ready ()  -Ereignis zu entfernen und in eine Funktion adjustMenu einzufügen.

Um die Funktion bei der Größenanpassung des Browsers aufzurufen, binden wir sie an die Größen- und Orientierungsänderung der Fensterereignisse.  Innerhalb dieses Ereignisses werden wir die Variable ww neu definieren, um sie an die neue Breite des Browsers anzupassen. 

An dieser Stelle haben wir weitere Probleme eingeführt: obwohl dies zunächst zu funktionieren scheint (das horizontale Menü wird in den "Menü" -Knopf, der das Menü öffnet, kollabiert), ist es schnell klar, dass wir zwei große Probleme haben:

  1. Das gesamte Menü wird ausgeblendet, wenn wir das Fenster mit der mobilen Breite nach dem Unterbrechungspunkt wieder verkleinern. 
  2. Das Hover-Ereignis wird weiterhin auf der mobilen Version ausgelöst. 

Schritt 9: Anzeigen und Verbergen    

Unser fehlendes Navigationsmenü scheint eine einfache Lösung zu sein: Fügen Sie einfach $ ("nav"). Show ()  unter der Größer-als-Breakpoint-Bedingung hinzu.  Diese Lösung scheint zu funktionieren, bringt aber einige knifflige Randfälle.  Da der Code bei jeder Größenanpassung des Browsers neu ausgewertet wird, wird er bei jeder Änderung der Größe des Menüs automatisch geschlossen. 

Dies mag wie ein unwahrscheinlicher Randfall erscheinen, aber mobile Browser sind komisch: Bei meinem Galaxy S zum Beispiel wird beim Scrollen nach unten und dann zurück an den Anfang einer Seite das Größenänderungsereignis ausgelöst.  Nicht gut!

Um dies zu beheben, müssen wir prüfen, ob auf das Menü geklickt wurde. Ich werde eine zusätzliche Klasse auf der Menüschaltfläche verwenden, weil sie für das Styling nützlich sein könnte (vielleicht möchten wir später einen Pfeil nach unten?).  Zusätzlich zur Anzeige des Navigationsmenüs kann die Menüschaltfläche umgeschaltet werden wird nun seine eigene Klasse von .active umschalten.  In unserer Bedingung "Kleiner als Breakpoint" aktualisieren wir den Code so, dass unser Navigationsmenü nur dann ausgeblendet wird, wenn die Menüschaltfläche keine Klasse von .active aufweist. 

Schritt 10 Hover-Ereignisse lösen

Um unser Problem des Navigationsmenüs im Mobilformat, das auf Hover-Ereignisse reagiert, zu lösen, müssen wir nur das Hover-Ereignis von unseren Listenelementen innerhalb der Bedingung "schmaler als Breakpoint" lösen ()

Dies beleuchtet jedoch ein neues Problem: Unsere Klickereignisse funktionieren nicht, wenn Sie die Größe des Browsers von groß auf klein ändern.  Ein Debugging zeigt, dass das Klickereignis einige Male an den Link gebunden war. Sobald wir also klicken, wird die .hover-Klasse aktiviert und dann sofort wieder deaktiviert.  Dies geschieht, weil die gesamte Funktion wiederholt ausgelöst wird, wenn Sie die Größe des Fensters ändern.  Um sicherzustellen, dass wir an der richtigen Stelle beginnen, müssen wir das Klickereignis lösen, bevor wir es erneut binden. 

Sobald wir die Größe des Browsers wieder von klein auf groß ändern, fehlt nun unser Hover-Ereignis, weil wir es bei einem kleinen Browser loslassen und unser Klickereignis immer noch vorhanden ist.  Lassen Sie uns also die Bindung los, bevor Sie auch unsere Hover-Anweisung binden. Wir werden auch alle Listenelemente mit einer Klasse von .hover entfernen, bevor wir sie im Hover-Ereignis hinzufügen, um zu verhindern, dass Menüs ungeschickt bleiben, wenn wir den Browser erweitern. 

Ich überschreibe die .click ()  und .hover ()  Ereignisse mit Hilfe von. Bind ()  aus Gründen der Klarheit.  Es bedeutet genau dasselbe. 

Hurra!  Alles scheint so zu funktionieren, wie es sollte. 

Schritt 11: Bringen Sie IE dazu, sich zu benehmen

Es wäre keine Party, wenn IE7 nicht käme, um es zu stürzen, oder?  Wir haben hier einen seltsamen Bug, bei dem unsere Untermenüs verschwinden, wenn sie über anderen Inhalten angezeigt werden (in unserem Beispiel etwas Lorem Ipsum-Text).  Sobald der Cursor das Absatzelement erreicht, * poof * kein Menü mehr.  Ich bin mir ziemlich sicher, dass dies aufgrund einiger Verrücktheiten in der Art und Weise, wie IE7 mit position: relative; umgeht, ist und das Problem leicht durch Auslösen von hasLayout auf dem Element .nav a gelöst werden kann. 

Weitere Überlegungen 

Wie immer müssen Sie Ihre eigene Beurteilung über Browser- und Feature-Unterstützung machen, aber Tools wie Modernizr und respond.js können die Unterstützung älterer Browser etwas erleichtern. 

Ich habe dieses Menü auf Mobile Safari und jedem Android 2.3-Browser getestet, den ich in die Finger bekommen konnte, und es scheint ziemlich gut zu funktionieren.  Diese Technik ist jedoch sehr JavaScript-abhängig, und da einige mobile Browser (im Allgemeinen Blackberry) JavaScript nur sehr schlecht unterstützen, können einige Benutzer ein unbrauchbares Navigationsmenü haben. 

Glücklicherweise gibt es eine Reihe von Methoden, mit denen Sie vereinfachte Layouts für Geräte ohne JavaScript bereitstellen können.  Die gute altmodische Technik, dem Body-Tag eine .no-js- Klasse hinzuzufügen und sie in Ihrem JavaScript zu entfernen, kommt Ihnen in den Sinn, aber Sie könnten auch nur href-Attribute für die Top-Level-Navigationselemente bereitstellen und Benutzer an den allgemeinen " Zum Beispiel "shoes" category listing und sich auf preventDefault verlassen, um dieses Verhalten in JavaScript-fähigen Geräten zu verhindern. 

Natürlich werden die Medienabfragen in älteren IE-Versionen nicht funktionieren. Sie müssen also entscheiden, ob es sinnvoll ist, ein Polyfill wie respond.js einzubinden, um diese Lücke zu schließen. 

Last but not least gibt es diesen lästigen iOS-Bug, der dazu führt, dass sich die Zoomstufe ändert, wenn Sie das Gerät drehen.  Sehen Sie sich das iOS Orientationchange Fix-Skript an, um diesen Fehler zu beheben.

Weiterführende Literatur 

Obwohl diese Technik für bestimmte Situationen und Menüstrukturen gut geeignet ist, gibt es immer noch viele andere Möglichkeiten, die Navigation auf mobilen Geräten zu zähmen.  Beispielsweise: 

Fühlen Sie sich frei, den GitHub Repo durchzulesen, zu klonen oder zu forkieren, und vielen Dank fürs Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.