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

Untersuchen der ansprechbaren Navigationsmustern 

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Examining Responsive Navigation Patterns.
Examining Responsive Navigation: Footer Patterns

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Wenn Webdesigner immer mehr ansprechbare Sites erstellen, werden ständig Muster für den Umgang mit der globalen Navigation sichtbar.  Das ist der erste einer Reihe von Beiträgen, die sich mit der Entwicklung einiger dieser Muster befassen.  In diesem Beitrag werden drei ansprechbare Navigationsmuster behandelt. das oberste Navi-, Prioritäts- und Auswahlmenü.

Ein Problem, mit dem sich fast jede ansprechbare Site befassen muss, ist der Umgang mit der globalen Navigation.  Eine Navigationsleiste oder ein Menü, die bequem auf einen Breitbildschirm passen, kann auf einem kleinen Bildschirm leicht zu eng werden.  Dank des Experimentierens der weltweiten Webdesigner haben sich eine Reihe von Lösungen für dieses Problem entwickelt.

Brad Frost sammelte viele dieser ansprechbaren Navigationsmuster und sammelte dann einige komplexere Muster.  Dieser Beitrag ist der Beginn einer Serie, in der einige dieser Muster untersucht werden, insbesondere wie sie selbst entwickelt werden können, anstatt sich auf einen Copy-Paste-Ansatz zu stützen.  Wir werden drei ähnliche Muster betrachten und zusätzliche Gruppen von Mustern in zukünftigen Beiträgen berücksichtigen.


Die Muster

Das grundlegende Problem bei der ansprechbaren Navigation ist das Platzproblem.  Auf Breitbildschirmen haben wir viel Platz zum Arbeiten, aber bei Smartphones und ähnlichen kleinen Geräten ist das nicht der Fall.  Wir könnten den horizontalen Raum auf diesen kleinen Geräten in einen vertikalen Raum umwandeln, aber das drückt den Inhalt weiter auf der Seite.  Durch diese Muster bleibt die Navigation verfügbar, während der verwendete vertikale Raum begrenzt wird.

Drei Muster, die wir in diesem Beitrag betrachten, sind die:

  • Top-Nav (nichts tun) - reduziert die Menüpunkte auf ein Minimum und verwendet css, um die Navigation anzupassen.
  • Priorität - priorisiert Menüelemente, um ihre Anzeige basierend auf der verfügbaren Bildschirmbreite anzuzeigen und auszublenden.
  • Select Menu (Menü auswählen) - konvertiert eine Navigationsleiste in ein Auswahlmenü, in dem der verfügbare Speicherplatz begrenzt ist.

Jedes dieser Muster versucht, das Raumproblem auf unterschiedliche Weise zu lösen.

Die Demo zeigt alle drei Muster sowie eine Variation des Auswahlmenümusters.  Im Folgenden gehe ich durch die einzelnen Seiten, obwohl ich den Code auf die Kopfzeilen der einzelnen Seiten beschränke, um die Dinge ein wenig einfacher zu gestalten.



Top-Nav (Do Nothing)-Muster

Das Top-Nav-Muster ist wahrscheinlich der gebräuchlichste Ansatz.  Die Änderungen zwischen schmalem und breitem Bildschirm sind minimal, daher der Spitzname "nichts tun".  Normalerweise ist alles, was nötig ist, ein paar kleinere Änderungen an Ihrem CSS, um dieses Muster zum Laufen zu bringen.

Ansatz: Die Demo hat eine sehr einfache Kopfzeile.  Es enthält ein Logo und mehrere Links, aus denen sich unsere globale Navigation zusammensetzt.  Unsere Herausforderung besteht darin, zwischen der Navigation unter dem Logo und dem Verschieben nach rechts zu wechseln, sobald genügend Platz zur Verfügung steht.

Schritt 1: Das HTML

Das Markup ist ziemlich einfach.  In einem html5-Header-Element haben wir ein Logo und eine ungeordnete Liste von Links für unsere Navigation.  Der Container div ist einfach eine Möglichkeit, den Hintergrund des Headers von Kante zu Kante zu strecken, während der Inhalt innerhalb einer maximalen Breite zentriert bleibt.  Das funktioniert genauso wie das Umhüllen des gesamten Codes in einem einzigen Container, bietet jedoch mehr Flexibilität hinsichtlich dessen, was enthalten ist und nicht.

Eine Sache, über die Sie sich wundern können, ist die Verwendung geschützter Leerzeichen in den Menübeschriftungen.  Wenn der Browser die Größe ändert, möchten die Menüelemente zwischen einer und zwei Zeilen springen.  Die geschützten Leerzeichen sorgen dafür, dass das gesamte Label immer in einer einzigen Zeile verbleibt, um hässliche Zeilenumbrüche zu vermeiden.

Schritt 2: Das Standard-CSS

Die Standard-CSS für Kopfzeile und Logo ist ebenfalls recht einfach.  Die Kopfzeile selbst erhält einige Farbstile und ein wenig Auffüllung an der Unterseite.  Auf kleinen Bildschirmen wird die Navigation unter dem Logo angezeigt und beides zentriert.  Ich habe dem Logo selbst einen Spielraum gegeben, um oben und unten etwas Platz hinzuzufügen.

Die Standard-CSS für die Navigation ist ziemlich einfach.  Wenn Sie schon einmal eine Navigationsleiste codiert haben, sollte sie bekannt aussehen.  Eine Sache, die oft in einer Navigationsleiste enthalten ist, aber hier fehlt, ist ein Float auf den Links.  Da wir standardmäßig alles zentrieren werden, speichern wir den Float, bis wir ihn brauchen.

Der Schlüssel zum oben genannten ist der Abstand zwischen den Links.  Nicht genügend Speicherplatz und die einzelnen Links sind schwer zu erreichen.  Wenn Sie zu viel Platz haben, wird Ihre Navigation auf eine zusätzliche Linie fallen und mehr vertikalen Raum beanspruchen.  Was ich getan habe, ist einen Kompromiss zu suchen, der so viel Platz wie möglich zwischen den Links erlaubt, während die Linkreihen maximal zwei sind.

Bei den Stilen oben sollte die Navigation so aussehen, wie Sie unten sehen.  Der Screenshot wurde mit meinem Browser auf 320px aufgenommen.


Schritt 3: Die Medienabfragen

Bei den ersten Medienabfragen wird der Abstand zwischen den Links angepasst.  Wir haben nicht genug Platz, um die Navigation ein wenig nach oben und rechts zu verschieben, aber auf dem Weg können wir die Polsterung der Links entsprechend dem Raum anpassen.  Es gibt keinen richtigen oder falschen Betrag.  Ich habe nur mit der Browserbreite herumgespielt und an verschiedenen Stellen Anpassungen vorgenommen.

Bei 42.5em (680px) ist genug Platz, um alle Links in einer einzigen Zeile unterzubringen, sodass ich die linke und rechte Polsterung auf eine Zeile reduziert habe.


Sobald der Bildschirm auf etwa 52,5 em (840 Pixel) eingestellt ist, ist ausreichend Platz vorhanden, um die Navigationsleiste nach oben und rechts vom Logo zu verschieben.  Zuerst schweben wir das Logo nach links.  Die Auffüllung am unteren Rand der Kopfzeile wird nicht mehr benötigt, also entfernen wir sie.

Wir bewegen die Navigationsleiste nach rechts und reduzieren die linken und rechten Abstände der Links etwas mehr und die Navigation springt ein.  Da wir es richtig schweben, entfernte ich die rechte Polsterung des letzten Links.  Eine letzte Änderung ist das Festlegen, dass die Links als Elemente auf Blockebene angezeigt werden, um die Größe des anklickbaren Bereichs zu vergrößern. Aufgrund dieser Änderung müssen die Links nun verschoben werden.


Diese letzten beiden Änderungen dienen wiederum ausschließlich der Anpassung des Abstands zwischen den Links und wiederum waren die Änderungen mehr für mein Auge als alles andere.

Tipps

Das ist ein ziemlich einfaches Muster, weshalb es so häufig verwendet wird.  Abhängig von Ihrem Design müssen Sie wirklich nichts ändern, außer ein paar Änderungen hier und da.

Dieses Muster funktioniert am besten, wenn die Anzahl der Menüelemente begrenzt ist.  Ich habe hier fünf gebraucht.  Sechs würden wahrscheinlich funktionieren.  Vier funktioniert wahrscheinlich besser.

Es ist wichtig, darauf zu achten, dass auf schmalen Bildschirmen genügend Platz um die Links bleibt, damit jeder ausgewählt werden kann.  Denken Sie bei einem Telefon daran, dass Sie die Auswahl nicht mit einer präzisen Maus treffen.  Sie werden Ihre Finger verwenden, die nicht so präzise sind.

Die andere Sache, die zu beachten ist, ist, dass die Link-Labels die Zeilen in einigen Breiten überschreiten möchten.  Hier habe ich einen sicheren Raum verwendet, um das zu verhindern, was nicht unbedingt die ideale Lösung ist.

Beispiele

Die folgenden Websites verwenden alle das Top-Nav-Muster




Das Prioritätsmuster

Die Top-Nav-Muster funktionieren gut, wenn Sie nur wenige Links in Ihrer Navigation haben.  Manchmal können Sie die Anzahl der Menüelemente jedoch nicht auf vier oder fünf reduzieren, und das Muster bricht zusammen.  Auf den kleinsten Bildschirmen wird zu viel vertikaler Platz benötigt.

Obwohl Sie möglicherweise mehr Links benötigen, gibt es wahrscheinlich einige, die wichtiger sind als andere.  Hier kommt das Prioritätsmuster ins Spiel.  Die Idee ist, eine Priorität für die Verknüpfungen durch Klassen in den Menüelementen festzulegen.

Auf den breitesten Bildschirmen werden alle Links angezeigt.  Wenn der Browser kleiner wird, werden die Links mit der niedrigsten Priorität hinter einem Link "Weitere" ausgeblendet.  Wenn der Browser noch kleiner wird, wird die nächste Ebene der Links ausgeblendet.  Auf dem kleinsten Bildschirm verwenden Sie ein Minimum an vertikaler Fläche, bis der Besucher nach "mehr" Links fragt.

Ansatz: Die Demo hat wieder eine einfache Kopfzeile.  Dieses Mal enthält es mehr Links, so dass wir die Navigation immer unter der Kopfzeile halten.  Wir haben zwei verschiedene Herausforderungen, wenn Sie das Menü von kleinen zu breiten Bildschirmen umschalten.

  • Einige Links standardmäßig anzeigen und ausblenden
  • Einige Links anzeigen und ausblenden, wenn Sie dazu aufgefordert werden

Schritt 1: Das HTML

Das HTML ähnelt dem Top-Nav-Muster.  Die Unterschiede sind die zusätzlichen Links und die "More" - und "Weniger"-Links, die wir zum Anzeigen und Ausblenden anderer Links verwenden.  Ebenfalls enthalten sind die Prioritätsklassen (Alpha, Beta, Gamma) für jedes Listenelement sowie die Klassen show-more und show-less.


Schritt 2: Das Standard-CSS

Das Standard-Styling ist identisch mit dem Standard-Styling für das oberste Navi-Muster (sehen Sie oben).  Die Ausnahme ist die Notwendigkeit, Links anzuzeigen und auszublenden.  Dazu gibt es zwei Teile.

Zuerst möchten wir nur die Alpha-Links und den Link "Mehr" auf den kleinsten Bildschirmen anzeigen, damit die anderen Links angezeigt werden display: none.

Zweitens müssen wir die anderen Prioritätslinks anzeigen und ausblenden und die Links "Mehr" und "Weniger" austauschen, wenn einer von ihnen angeklickt wird.  Dazu nutzen wir den :target pseudo-selector.  Wenn Sie mit dieser Auswahl nicht vertraut sind, ähnelt dies der Funktionsweise eines benannten Ankers.

Der :target stimmt überein, wenn der Hash in einer URL und eine ID in einem Element identisch sind.  Mit anderen Worten: wenn Sie die url domain.com#more haben,  :target passt zu jedem Element, bei dem id="more" hinzugefügt wird.

Möglicherweise haben Sie in der HTML-Datei oben festgestellt, dass der Link "more" #more ist.  Wenn Sie darauf klicken, gelangen Sie zu derselben Seite, in der die hash #more hinzugefügt wurde.  Was ich oben nicht gezeigt habe, war das HTML-Element auf der Seite.

Wenn Sie auf mehr klicken, können Sie das html-Tag mithilfe des: target-Pseudo-Selektors anvisieren und folglich alles, was im html-Tag enthalten ist.  Wir können die ausgeblendeten Links anzeigen und den Link "more" mit folgendem ausblenden.

Wenn jemand auf den Link "less" klickt, entfernen wir den Hash und diese :target selectors werden nicht mehr wirksam.

Hinweis: Während ich dem HTML-Tag die id="more" hinzugefügt habe, kann jedes übergeordnete Element im DOM funktionieren.  Es muss nur etwas sein, das alle Elemente enthält, die Sie letztendlich auswählen möchten.


Schritt 3: Die Medienabfragen

Wie im Beispiel für das Top-Navi habe ich einige Medienanfragen eingerichtet, bei denen sich nur die Auffüllung zwischen Links ändert.  Ich wechselte auch von der Zentrierung alles und schwebte sowohl das Logo als auch die Navigationsleiste nach links, obwohl ich für dieses Muster die Navigation unter dem Logo belassen habe.

Ich werde nicht all diesen Code präsentieren, obwohl Sie ihn auf der Demo-Seite mit dem Muster für Prioritätsmuster sehen können.  Lassen Sie uns stattdessen die Links mit niedrigerer Priorität offenlegen, was ziemlich einfach ist.  Alles, was wir tun müssen, ist, jede Prioritätsstufe von Links anzuzeigen, sobald genügend Platz vorhanden ist, um sie anzuzeigen.  Wir zeigen zuerst die Beta-Links und dann das Gamma.

Sobald alle 3 Prioritätsstufen der Links angezeigt werden können, müssen wir nicht mehr die "less" - oder "more"-Links anzeigen, sodass wir sie vollständig deaktivieren.


Tipps

Von allen Mustern ist das Prioritätsmuster das, das Sie wahrscheinlich am wenigsten verwenden werden, es kann jedoch in einigen Fällen eine gute Lösung sein.  Es hat einige Nachteile.  Zum einen funktioniert der: target Pseudo-Selector in IE8 und darunter nicht.  IE6 und IE7 sind leicht aufzugeben, aber ich denke, wir müssen IE8 realistischerweise etwas länger unterstützen.  Sie können die obige: Zielmethode durch eine Javascript-Lösung ersetzen, um stattdessen Links für IE8 anzuzeigen und auszublenden.

Ein größeres Problem ist, dass das Umschalten zwischen mehr und weniger Links etwas erschüttern kann.  In diesem Beispiel habe ich diese Links am Ende platziert, und wenn Sie auf einen Link klicken, bleibt der andere an einem anderen Ort.  Sie haben das Gefühl, sie sollten einfach an Ort und Stelle wechseln, aber sie tun es nicht.

Sie können dies kompensieren, indem Sie die Links zuerst in die Liste setzen oder mehrere Paare verwenden, die immer angezeigt werden, nachdem die Prioritätslinks angezeigt werden und vor denen, die standardmäßig ausgeblendet sind. Beide Lösungen sind jedoch nicht die eleganteste Lösung.

Beispiele

Zwei der folgenden Beispiele sind Demos. Das letzte Beispiel ist ein Beispiel für dieses Muster, das auf einer Live-Site verwendet wird.




Das Auswahlmenü-Muster

Das Auswahlmenü-Muster ist eine weitere Möglichkeit, das Problem zu vieler Links für einen kleinen Bildschirm zu lösen, jedoch wird die Liste der Links in ein Auswahlfeld umgewandelt.  Der Vorteil ist, dass die Auswahlbox weniger vertikalen Platz beansprucht.  Der Nachteil ist, dass Ihre globalen Navigationslinks standardmäßig ausgeblendet sind.

Ein weiterer Nachteil ist, dass Sie beide Navigationsarten in Ihrer HTML-Datei codieren müssen, da es nicht möglich ist, eine Auswahl wie eine Liste oder umgekehrt aussehen zu lassen.  Dies bedeutet, dass Sie zwei Menüs verwalten müssen, was bei mehr als nur wenigen Links ein Problem sein kann.  Ich werde auf eine andere Version dieses Musters näher eingehen, in der Javascript verwendet wird, um eines der Menüs zu erstellen.

Vorgehensweise: Wir beginnen mit zwei html-Menüs, einem mit der gleichen ungeordneten Liste, die wir für das oberste Navigationsmuster verwendet haben, und einem mit einem Auswahlelement.  Wir werden in einer Medienabfrage von einem zum anderen wechseln, wenn der Platz dies zulässt.  Wir müssen auch ein bisschen Javascript hinzufügen, so dass wir durch Auswählen einer Option auf eine neue Seite gelangen.

Schritt 1: Das HTML

In der ungeordneten Listenversion des Menüs gibt es nichts Neues.  Neu ist das Hinzufügen der Auswahlbox und der entsprechenden Optionen.  Die Werte des href-Attributs werden in das value-Attribut des option-Elements verschoben.

Schritt 2: Das Standard-CSS

Der allgemeine Standardstil ist derselbe wie der oben gezeigte, so dass ich ihn hier nicht wiederholen möchte.  Bei den kleinsten Bildschirmen habe ich mich dazu entschieden, das Auswahlmenü unter dem Logo abzulegen und zentriert zu lassen.  Die Breite von 75% schien alles zu sein, was nötig war.


Schritt 3: Die Medienabfragen

Die CSS in den Medienabfragen ist wieder ziemlich einfach.  Da das Auswahlmenü keinen großen horizontalen Platz einnimmt, können Sie es relativ schnell nach oben und rechts vom Logo verschieben.

Die Hauptänderung besteht darin, das Auswahlmenü auszublenden und das Menü für ungeordnete Listen anzuzeigen, was durch die Anzeigeeigenschaft von beiden leicht erreicht werden kann.  In Bezug auf die Zugänglichkeit ist dies auch ratsam, da Bildschirmlesegeräte die Navigation nur einmal scannen müssen.  Wenn die ungeordnete Liste angezeigt wird, verschieben wir sie nach rechts und passen die Auffüllung der Links an.

Darüber hinaus habe ich noch eine weitere Änderung vorgenommen, um den Links auf breiteren Bildschirmen etwas mehr Polsterung zu verleihen.

Schritt 4: Ein wenig Javascript

Dieses Muster benötigt ein wenig Javascript, so dass die Optionen im Auswahlmenü zu neuen Seiten führen.  Hier habe ich ein wenig jQuery verwendet (nachdem ich jQuery im Kopf des Dokuments aufgenommen hatte).

Beispiele

Die folgenden Websites verwenden alle das Auswahlmenümuster.




Wählen Sie Menü JS

Ich habe oben erwähnt, dass Sie Javascript verwenden können, um das Auswahlmenü zu erstellen, sodass Sie nicht zwei Gruppen identischer Links verwalten müssen.  Wieder einmal verwende ich jQuery, um das Auswahlmenü aus der ungeordneten Liste mit Code zu erstellen, der von Chris Coyier geliehen wurde.

Zuerst erstellen wir das select und hängen es an unser nav-Element an.  Im nächsten Block wird die Option "Auswählen" erstellt, die standardmäßig angezeigt wird.  Das ist nicht wirklich nötig.  Stattdessen können Sie das erste Menüelement anzeigen lassen oder vielleicht einen kleinen Code hinzufügen, sodass die Option für die jeweilige Seite standardmäßig ausgewählt ist.

Der letzte Block greift jeden Link aus der ungeordneten Liste auf und fügt die URL und den Text dem entsprechenden Teil des Optionselements hinzu.

Schließlich enden wir mit der gleichen jQuery wie oben, um sicherzustellen, dass die Optionen den Besucher zu der ausgewählten Seite führen.


Zusammenfassung 

Das sind drei der häufigsten Muster, die für die responsive Navigation verwendet werden. 

Das Top-Nav-Muster funktioniert am besten, wenn Sie nur wenige Links haben und nicht viel anderes benötigen als die stilistischen Änderungen, die Sie vornehmen möchten. 

Das Prioritätsmuster kann verwendet werden, wenn Sie mehrere Links haben.  Es blendet verschiedene Ebenen priorisierter Links basierend auf dem verfügbaren Speicherplatz aus und schaltet die Anzeige der Links über den :target Pseudo-Zielselektor um.

Das Auswahlmenümuster konvertiert ungeordnete Listenmenüs in Auswahlmenüs, um keinen zusätzlichen vertikalen Raum zu beanspruchen. 

Es gibt noch mehr Muster, die wir in zukünftigen Posts dieser Serie betrachten werden.  Danke 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.