Share
Da Webdesigner immer mehr responsive Sites erstellen, werden ständig Muster für den Umgang mit globaler Navigation sichtbar. Dies ist der erste einer Reihe von Beiträgen, die sich mit der Entwicklung einiger dieser Muster befassen. In diesem Beitrag werden drei responsive Navigationsmuster behandelt. das oberste Navi-, Prioritäts- und Auswahlmenü.
Ein Problem, mit dem sich fast jede responsive Site befassen muss, ist der Umgang mit der globalen Navigation. Eine Navigationsleiste oder ein Menü, die bequem auf einen großen Bildschirm passen, kann auf einem kleinen Bildschirm schnell zu eng werden. Dank des Experimentierens der weltweiten Webdesigner hat sich eine Reihe von Lösungen für dieses Problem entwickelt.
Brad Frost sammelte viele dieser responsiven 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 Posts berücksichtigen.
Das grundlegende Problem bei der responsiven Navigation ist das Platzproblem. Auf Breitbildschirmen haben wir viel horizontalen 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.
Die 3 Muster, die wir in diesem Beitrag betrachten, sind die:
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.
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 einen sehr einfachen Header. 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.
Das Markup ist ziemlich einfach. In einem html5-Header-Element haben wir ein Logo und eine ungeordnete Liste von Links für unsere Navigation. Mit dem Container div kann der Hintergrund der Kopfzeile einfach von Kante zu Kante gestreckt werden, während der Inhalt mit maximaler Breite innerhalb der Mitte bleibt. Dies 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. Bei der Größenänderung des Browsers möchten die Menüelemente zwischen einer und zwei Zeilen wechseln. Durch die geschützten Leerzeichen wird sichergestellt, dass das gesamte Label immer in einer einzigen Zeile verbleibt, um hässliche Zeilenumbrüche zu vermeiden.
Die Standard-CSS für Header 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.
Header Farbe: #eee; Hintergrund: # 2b2726; Polsterung unten: 1em; Text ausrichten: Mitte; .logo margin: 1.25em 0; Breite: 200px;
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.
# demo-nav margin: 0; Polsterung: 0; Listenstil: keine; Überlauf versteckt; # demo-nav li display: inline; # demo-nav a color: #fff; Polsterung: 0,75em; Textdekoration: keine; Zeilenhöhe: 2,5; # demo-nav a: hover text-decoration: underline;
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 in eine zusätzliche Zeile verschoben und nimmt mehr vertikalen Raum ein. 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.
Bei den ersten Medienabfragen wird der Abstand zwischen den Links angepasst. Wir haben nicht genug Platz, um die Navigation ein wenig nach oben und nach rechts zu verschieben, aber auf dem Weg können wir die Auffüllung 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 so reduzierte, dass sie alle in eine Zeile passen.
@media screen und (min-width: 30em) # demo-nav a padding: 0.75em 1.75em; @media screen und (min-width: 42.5em) # demo-nav a padding: 0.75em 1.1em;
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.
@media screen und (min-width: 52.5em) .logo float: left; header padding-bottom: 0; # demo-nav float: right; # demo-nav a padding: 1.25em 0,75em; Bildschirmsperre; float: left # demo-nav li: last-child a padding-right: 0;
Diese letzten beiden Änderungen dienen wiederum ausschließlich der Anpassung des Abstands zwischen den Links, und wieder waren die Änderungen mehr für mein Auge als alles andere.
@media screen und (min-width: 64em) # demo-nav a padding: 1.5em; @media screen und (min-width: 75em) # demo-nav a padding: 1em 2.25em; Zeilenhöhe: 3em
Dies 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 überbrücken möchten. Hier habe ich einen sicheren Raum verwendet, um das zu verhindern, was nicht unbedingt die ideale Lösung ist.
Die folgenden Websites verwenden alle das Top-Nav-Muster
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 besteht darin, 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 einen einfachen Header. 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.
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.
Das Standard-Styling ist mit dem Standard-Styling für das oberste Navi-Muster oben identisch. Ich werde es hier nicht wiederholen. 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 wir die anderen Links festlegen können Anzeige: keine.
# demo-nav li.beta, # demo-nav li.gamma, # demo-nav li.show-less 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: Zielselektor 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 # -Erweiterung haben, dann wird target mit jedem Element übereinstimmen id = "mehr" hinzugefügt.
Möglicherweise haben Sie in der HTML-Datei oben festgestellt, dass der Link "more" mehr ist. Wenn Sie darauf klicken, gelangen Sie zu derselben Seite, in der die Hash-Nummer 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 mit dem: target-Pseudo-Selector anvisieren und folglich alles, was im html-Tag enthalten ist. Wir können die ausgeblendeten Links anzeigen und den Link "Weitere" mit folgendem ausblenden.
: target # demo-nav li.beta,: target # demo-nav li.gamma,: target # demo-nav li.show-less display: inline;: target # demo-nav li.show-more display : keiner;
Wenn jemand auf den Link "Weniger" klickt, entfernen wir den Hash und diese: Zielselektoren werden nicht mehr wirksam.
Hinweis: Während ich die id = "mehr" Mit dem HTML-Tag kann jedes übergeordnete Element im DOM funktionieren. Es muss nur etwas sein, das alle Elemente enthält, die Sie letztendlich auswählen möchten.
Wie im Beispiel für das Top-Navi habe ich einige Medienabfragen eingerichtet, bei denen sich nur die Auffüllung zwischen Links ändert. Ich wechselte auch von der Zentrierung alles, um sowohl das Logo als auch die Navigationsleiste nach links zu verschieben. Für dieses Muster habe ich die Navigation jedoch unter dem Logo gehalten.
Ich werde nicht den gesamten Code präsentieren, obwohl Sie ihn auf der Demo-Seite mit dem Muster für Prioritätsmuster sehen können. Konzentrieren wir uns stattdessen darauf, die Links mit niedrigerer Priorität aufzudecken, 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 zur Verfügung zu stellen. Wir zeigen zuerst die Beta-Links und dann das Gamma.
@media screen und (min-width: 48em) # demo-nav li.beta display: inline; @media screen und (min-width: 75em) # demo-nav li.gamma display: inline; # demo-nav li.show-more, Ziel # demo-nav li.show-less display: none;
Sobald alle 3 Prioritätsstufen der Links angezeigt werden können, müssen wir nicht mehr die "Weniger" - oder "Mehr" -Links anzeigen, um sie vollständig auszuschalten.
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.
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 ist eine andere 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 besteht darin, 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. Das bedeutet, dass Sie zwei Menüs verwalten müssen, was bei mehr als ein paar 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.
Ansatz: Wir beginnen mit zwei html-Menüs, einer mit der gleichen ungeordneten Liste, die wir für das Top-Nav-Muster verwendet haben, und einer mit einem select-Element. 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.
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.
Der allgemeine Standardstil ist derselbe wie der oben gezeigte, daher werde ich ihn hier nicht wiederholen. 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.
# Auswahlmenü Breite: 75%;
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.
@media screen und (min-width: 30em) .logo float: left; # select-menu float: right; klar: keine; Breite: 40%; Spitzenoberseite: 2.25em; #header padding-bottom: 0; Textausrichtung: links;
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.
@media screen und (min-width: 64em) # select-menu display: keine; # demo-nav display: block; schweben rechts; # demo-nav a padding: 1.25em 1.5em; # demo-nav li: letztes Kind a padding-right: 0;
Darüber hinaus habe ich noch eine weitere Änderung vorgenommen, um den Links auf breiteren Bildschirmen etwas mehr Polsterung zu verleihen.
Dieses Muster benötigt eine kleine Menge 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 eingefügt hatte).
Accentsconagua
$ (function () $ ("div select"). change (function () window.location = $ (this) .find ("option: selected"). val (););); Die folgenden Websites verwenden alle das Auswahlmenümuster.
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 aus der ungeordneten Liste ein Auswahlmenü mit Code zu erstellen, der von Chris Coyier entliehen 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.
$ (function () // Erstellen Sie die Dropdown-Basis $ ("") .appendTo (" nav "); // Standardoption erstellen" Select "$ ("", " ausgewählt ":" ausgewählt "," Wert ":" "," Text ":" Auswählen "). appendTo (" nav select "); // Dropdown-Menü mit den Menüelementen $ (" nav a ") .each (function () var el = $ (this); $ ("", " value ": el.attr (" href ")," text ": el.text ()). appendTo (" nav select ");); Schließlich enden wir mit der gleichen jQuery wie oben, um sicherzustellen, dass die Optionen den Besucher zu der ausgewählten Seite führen.
$ ("nav select"). change (function () window.location = $ (this) .find ("option: selected"). val ();); ); Dies 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 mehr als einige Links haben. Es verbirgt verschiedene Ebenen priorisierter Links basierend auf dem verfügbaren Platz und schaltet die Anzeige der Links durch :Ziel Pseudo-Selektor.
Das Auswahlmenümuster konvertiert ungeordnete Listenmenüs in Auswahlmenüs, um keinen zusätzlichen vertikalen Raum zu beanspruchen.
Es gibt noch weitere Muster, die wir in zukünftigen Posts dieser Serie betrachten werden. Danke fürs Lesen!
