Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Untersuchen der Ansprechbaren Navigation: Fußzeilenmuster

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

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

Willkommen zur zweiten in einer Reihe, die sich mit ansprechenden Navigationsmustern beschäftigt.  In diesem Artikel werden Sie durch vier Muster geführt, bei denen die Navigation zur Fußzeile verschoben wird und Speicherplatz am oberen Seitenrand erhalten bleibt.

Also, um es zu wiederholen. Im vorherigen Tutorial haben wir drei Muster entwickelt, bei denen die Navigation unabhängig von der Bildschirmgröße im Header verbleibt.  Das Ziel dieser Muster war, den vertikalen Abstand zu minimieren, wenn die Navigation auf kleineren Bildschirmen betrachtet wurde.

Heute werden wir Dinge umdrehen und vier neue Muster entwickeln, bei denen die Navigation in der Fußzeile unseres Designs liegt.  Indem wir unser Menü an den unteren Rand der Seite verschieben, sparen wir natürlich Platz an der Spitze.  Wie bei dem vorherigen Artikel sind Ihnen diese Muster wahrscheinlich von Brad Frost bekannt, der Muster kompilierte, die auf responsiven Sites verwendet wurden, sowie einige komplexe Muster, die verwendet wurden.


Die Muster

Bei den drei Kopfzeilenmustern ging es vor allem um den Raum, insbesondere den vertikalen Raum und wie man nicht zu viel davon nutzt.  Sie möchten, dass Besucher Ihre Inhalte so schnell wie möglich sehen, und sie können dies nicht tun, wenn die Navigation den gesamten Bildschirm einnimmt.  Eine Möglichkeit, dieses Problem zu lösen, besteht darin, die Navigation in die Fußzeile zu verschieben.

Das eröffnet weitere Herausforderungen.  Während Besucher leichter zu den Inhalten gelangen, müssen sie jetzt zum Ende der Seite scrollen, um die Navigation zu entdecken.

Die Muster, die wir in diesem Artikel entwickeln werden, sind:

  • Footer only - behält das Menü in der Fußzeile immer bei.
  • Footer only variation - behält das Menü in der Fußzeile auf kleinen Bildschirmen bei, verschiebt es jedoch in den Header, sobald der Platz es zulässt.
  • Footer anchor - behält das Menü in der Fußzeile auf kleinen Bildschirmen bei, stellt jedoch einen Link (Schaltfläche) oben auf der Seite bereit.
  • Footer fixed - hält das Menü in der Fußzeile auf kleinen Bildschirmen und führt eine feste Positionierung ein, so dass es sichtbar bleibt.

Jedes dieser Muster baut auf dem Muster davor auf.  Zuerst werden wir die Navigation in die Fußzeile verschieben und dann werden wir Variationen hinzufügen, die sie sichtbarer und leichter zugänglich machen.

Wie im vorherigen Artikel zu den Header-Mustern werde ich den untenstehenden Code für das Menü und die zugehörigen Elemente beibehalten.  Der vollständige Code ist über den obigen Download-Link verfügbar und kann auch bei einem Besuch der Demo und dem Anzeigen des Quellcodes eingesehen werden.


Footer Only Muster

Wie der Name andeutet, verschiebt das Fußzeile-nur-Muster die globale Navigation in die Fußzeile.  Sie werden dieses Muster wahrscheinlich nicht so verwenden, wie es ist.  Während oben auf der Seite vertikaler Platz frei wird, wird die Navigation unten ausgeblendet.  Das mag auf Smartphone-Bildschirmen gut funktionieren, aber auf einem Breitbild-Browser ist das nicht sehr sinnvoll.


Dieses Muster bildet jedoch die Grundlage für die anderen Muster, die darauf aufbauen und dazu beitragen, das Menü leichter zugänglich zu machen.

Ansatz: Auf den kleinsten Bildschirmen richten wir das Menü so ein, dass es unten auf der Seite als vertikale Liste von Links angezeigt wird.  Dann werden wir sie stylen, um sie ein wenig attraktiver zu machen.  Durch Medienabfragen werden wir das Menü von vertikal auf horizontal umstellen, obwohl das Menü immer unten auf der Seite bleibt.

Schritt 1: Der HTML-Code

Da wir unseren Navigationscode verschieben, werfen wir einen kurzen Blick auf die Gesamtstruktur der Seite für einen bestimmten Kontext.  Zuvor befand sich die Navigation innerhalb des Header-Elements mit dem Logo.  Jetzt ist es in der Fußzeile mit dem Kredit.

Ansonsten ist es die gleiche Liste von Links, die wir im ersten Teil gesehen haben.  Ich habe lediglich den genauen Code in der Demo kopiert und eingefügt, um ihn von oben nach unten zu verschieben.


Schritt 2: Das Standard-CSS

Standardmäßig zeigt eine Liste ihre Elemente als Elemente auf Blockebene an.  Das ist es, was wir wollen, also haben wir einen leichten Start.  Die Standardstile sind hauptsächlich ästhetisch.  Zuerst setzen wir den Rand und die Füllung der Liste auf 0 und entfernen die Kugeln.  Als Nächstes geben wir den Listenelementen einen oberen Rand und legen den aktuellen Link als eine andere Farbe fest.

In ähnlicher Weise erhalten die restlichen Links eine Farbe und etwas Polsterung.  Die Unterstreichung wurde entfernt und die Links wurden so eingestellt, dass sie als Elemente auf Blockebene angezeigt werden, um den anklickbaren Bereich der Verbindung zu vergrößern.  Je mehr Bereich Sie berühren können, um den Link zu aktivieren, desto besser für kleine Bildschirme und fette Finger. Vielleicht am interessantesten ist der Hintergrund.  Um ein visuelles Interesse zu erzeugen, habe ich beschlossen, den Links einen Farbverlauf zu geben und den Hintergrund beim Schweben etwas heller zu machen.

Auch das ist alles rein ästhetisch.  Standardmäßig zeigte das Menü eine vertikale Liste von Links, was wir wirklich brauchten.


Schritt 3: Die Medienabfragen

Die vertikale Liste von Links, die wir oben entworfen haben, funktioniert gut, bis die Browserbreite ungefähr 42.5em (680px) erreicht.  An diesem Punkt fühlt sich der horizontale Raum ein wenig zu leer an.  Wir werden das Menü in ein horizontales Menü umwandeln, das sich immer noch am unteren Rand der Seite befindet.

Der Übergang erfolgt, indem die Links in der Liste nach links verschoben werden.  Alles andere soll die Ästhetik wiederherstellen. Zuerst gab ich der Liste eine Hintergrundfarbe, die zwischen den Subfooter-Links und dem Kredit funktionieren würde.  Ich gab ihm auch etwas Polsterung und einen unteren Rand.  Da die Links im Inneren jetzt schweben, habe ich einen Überlauf hinzugefügt: versteckt zur Liste, um zu zwingen, offen zu bleiben.

Die Links erhalten dann etwas Polsterung.  Die 5% auf der linken Seite ist die gleiche Polsterung, die alles andere entlang der linken Kante eingestellt hat.  Ich entfernte den Rahmen, da die Links nicht mehr übereinander liegen und entfernte auch die Hintergrundfarbe hinter ihnen.  Da ich zuvor einen Farbverlauf im Hintergrund verwendet hatte, musste ich auch die Eigenschaft "background-image" auf den Links löschen, einschließlich des Hover-Status.

Die nächste Medienabfrage besteht einfach darin, den Links ein wenig mehr Platz zu geben, wenn der Browser breiter wird.

Wir könnten die Dinge einfach so lassen und nach Bedarf weitere Leerzeichen zwischen den Links hinzufügen.  Stattdessen habe ich beschlossen, die Links nach unten und rechts von dem Kredit abzulegen, sobald genug Platz war.

Als erstes setze ich die Liste so, dass sie nach rechts schwebt, was sie meistens in Position bringt.  Nach einiger Anpassung an den Link-Padding ist es vollständig vorhanden.  Wir müssen auch den Hintergrund des gesamten Menüs entfernen, da wir möchten, dass die Footer-Farbe der Hintergrund ist.

Die letzte Medienabfrage ist noch einmal, den Abstand zwischen den Verbindungen anzupassen.  Wir hören hier auf, können jedoch weitere Medienabfragen hinzufügen, um den Speicherplatz zu erhöhen.

Tipps

Es gibt wirklich nicht viel zu diesem Muster, sobald Sie den HTML-Code für die Navigation an den unteren Rand der Seite verschieben.  Die Mehrheit der oben genannten CSS ist ästhetisches Styling und Sie können Ihre Speisekarte frei gestalten, wie Sie möchten.  Irgendwann möchten Sie es wahrscheinlich von einem vertikalen in ein horizontales Menü umwandeln.

Was am Fußzeilenmuster gut ist, ist, dass es funktionieren kann, egal wie viele Links Ihre Navigation enthält.  Auf den kleinsten Bildschirmen können Sie so viel vertikalen Platz verwenden, wie Sie möchten, und wenn Sie Platz haben, können Sie diese Verbindungen horizontal nebeneinander platzieren.  Der Schlüssel ist, sicherzustellen, dass die Links genügend Platz um sie herum haben, so dass sie unabhängig voneinander berührt werden können, ohne einen anderen Link zu treffen.

Auch hier werden Sie dieses Muster wahrscheinlich nicht verwenden und stattdessen eine der folgenden Varianten dieses Musters verwenden, um das Menü besser sichtbar und zugänglich zu machen.

Beispiele

Die unten aufgeführten Websites verwenden ausschließlich das Fußzeilenmuster


Das Fußzeilenvariationsmuster

Dieses zweite Muster ist nur eine Variation der Fußzeile.  Bis zu 64em (1024px) ist es im Code fast genau gleich und sieht beim Betrachten der Seite genauso aus.  Anstatt jedoch die Navigation auf die rechte Seite der Fußzeile zu verschieben, sobald der Platz es zulässt, verschieben wir sie auf die rechte Seite der Kopfzeile, wie Sie im Bild oben sehen können.


Auf kleinen Bildschirmen müssen Benutzer immer noch scrollen, um das Menü zu finden, aber jetzt wird es oben auf der Seite sein, wo die meisten Leute erwarten, es auf größeren Bildschirmen zu sehen.  Da der Großteil des Codes identisch ist, werde ich nur darauf eingehen, wo sich die Muster unterscheiden.

Ansatz: Wir werden das gleiche wie oben auf kleinen Bildschirmen tun.  Wir beginnen mit einem vertikalen Menü und wenn der Platz es erlaubt, werden wir das Menü horizontal umschalten.  Wir werden unterscheiden, sobald der Bildschirm weit genug wächst.  Anstatt das Menü auf die rechte Seite der Fußzeile zu verschieben, verschieben wir es auf die rechte Seite der Kopfzeile.

Schritt 1: Der HTML-Code

Der einzige Unterschied in der html zwischen diesem und dem Fußzeile-nur-Muster ist, dass die Navigation von der Innenseite der Fußzeile entfernt wurde und jetzt direkt darüber sitzt.  Das wirkt sich nicht auf die Darstellung auf kleinen Bildschirmen aus, aber es ist ein wenig einfacher, die Navigation in die Kopfzeile zu verschieben.


Schritt 2: Das Standard-CSS

Die einzige Änderung in der Standard-CSS ist unten.  Da ich das Menü außerhalb der Fußzeile verschoben habe, brauchte es das kleinste bisschen Styling, um einen Rand an die Spitze hinzuzufügen.

Schritt 3: Die Medienabfragen

Die ersten paar Medienabfragen (bei 42.5em und 56em sind identisch mit dem, was wir oben im Fußzeilenmuster gesehen haben.  Der Unterschied kommt, wenn wir 64em erreichen.  Oben habe ich das Menü auf die rechte Seite der Fußzeile verschoben.  Hier werden wir Verschiebe es an die rechte Seite der Kopfzeile.

Vieles davon ist ähnlich wie oben.  Zu beachten ist vor allem die Positionierung auf dem Navigationselement, das unser Menü enthält.  Wir können es diesmal nicht schweben lassen, da es sich am Ende der HTML-Struktur befindet.  Stattdessen werden wir nach Positionierung suchen.

Während ich es vorher nicht erwähnt habe, ist das body-Element auf position: relativ gesetzt.  Damit können wir das Navigationsgerät absolut positionieren und die Werte oben und rechts einstellen.

Alles andere ist entweder das Gleiche oder eine Verbesserung dessen, was wir oben gesehen haben.  Polsterungen sind ein wenig anders und wir müssen immer noch den Hintergrund und die Grenze auf dem Menü entfernen.

Sobald die Navigation an den Anfang der Seite verschoben wurde, bestehen die restlichen Medienabfragen, um die Auffüllung zwischen den Links zu erhöhen.  Hier bin ich bei 90em stehengeblieben, aber Sie fahren wieder so weit, wie Sie wollen.

Tipps

Dieses Muster hat die gleichen Vorteile wie das Fußzeilenmuster oben.  Es kann mit so vielen Links arbeiten, wie Sie möchten.  Noch besser bewegt es die Navigation an den Anfang der Seite, sobald genug Platz ist.  Wann das ist hängt von den Besonderheiten Ihres Designs ab.  Der Schlüssel ist wiederum, dass die Ziele für die Links groß genug für die Finger sind.

Natürlich hat dieses Muster auch den gleichen Nachteil wie das Fußzeile-nur-Muster auf kleineren Bildschirmen, wo die Leute immer noch scrollen müssen, um Ihre Navigation zu finden.

Beispiele


Der Footer Anchor

Das Fußzeilenankermuster (footer anchor pattern) versucht, das Problem zu lösen, dass ein Bildlauf erforderlich ist, um zum Menü zu gelangen, indem ein Ankerlink oben auf der Seite direkt in das Menü eingefügt wird.  Abgesehen von dieser Ergänzung ist dieses Muster identisch mit dem Fußzeile-Variationsmuster, das wir gerade erstellt haben.

Ansatz: Auf kleinen Bildschirmen beginnen wir mit dem gleichen vertikalen Menü, mit dem wir bisher gearbeitet haben.  Wir fügen eine CSS-Schaltfläche hinzu, die uns direkt zur Navigation in der Fußzeile bringt.  Sobald der Bildschirm breit genug ist und wir die Navigation wieder an den Anfang der Seite verschieben, wird die Ankerschaltfläche ausgeblendet.

Schritt 1: Der HTML-Code

Der HTML-Code ist identisch mit der obigen Fußzeilen-Variante, mit einer Ausnahme.  Wir müssen oben auf der Seite einen Link hinzufügen, den wir als Schaltfläche formatieren.  Wir werden die bereits vorhandene #demo-nav-ID verwenden, um als Anker für den Link zu dienen.  Wenn Sie darauf klicken, wird die Seite neu geladen und am Ende der URL ein #demo-nav-Hash hinzugefügt, der Sie direkt zur Navigation bringt.


Schritt 2: Das Standard-CSS

Der einzige Unterschied in der Standard-CSS ist, dass wir die Verknüpfung so gestalten müssen, dass sie eher wie eine Schaltfläche aussieht und sie an der rechten Seite der Kopfzeile positioniert.  Den Link nach rechts zu schweben und ihm einen gewissen Spielraum zu geben, kümmert sich um die Position.

Um es knackig zu machen, setzen wir zuerst die Verbindung, die als Block-Level-Element angezeigt werden soll, und fügen etwas Padding hinzu.  Nach dem Entfernen der Unterstreichung und dem Ändern der Farbe in Weiß fügen wir einen kleinen Randradius und dann einen Hintergrund hinzu.

Wir verwenden erneut einen Farbverlauf im Hintergrund, um die Schaltfläche ansprechbarer zu gestalten.  Für die ein oder zwei Browser, die damit nicht umgehen können, ist das keine große Sache, aber für diejenigen, die es tun können, wird es der Schaltfläche ein wenig Tiefe verleihen.  Für den Hover-Zustand werden wir die Farben etwas heller machen.


Schritt 3: Die Medienabfragen

Es gibt nur eine neue Sache in den Medienanfragen zu sehen.  Bei 64em (wo wir die Navigation an den oberen Rand der Seite verschoben haben) müssen wir die Schaltfläche ausblenden und so setzen wir ihre Anzeige auf none.  Alles andere ist genau dasselbe wie im Fußzeile-Variationsmuster.

Tipps

Dieses Muster hat alle Vorteile der oben genannten.  Es hält den vertikalen Abstand am oberen Rand der Seite auf ein Minimum.  Wie bei den anderen Mustern möchten Sie sicherstellen, dass die Verknüpfungsziele groß genug sind.  Der Anker macht die Navigation zugänglicher, wenn sie in der Fußzeile ist.

Der Nachteil ist der Sprung von oben nach unten auf der Seite.  Es könnte möglicherweise Besucher verwirren, die möglicherweise nicht erkennen, dass sie auf den Grund gesprungen sind.  Eine Möglichkeit, einen Hinweis anzugeben, besteht darin, einen Link "Zurück zum Anfang" hinzuzufügen.  Ich habe hier keins hinzugefügt, aber es würde sowohl den Leser orientieren als auch einen schnellen Zugriff auf den Anfang der Seite ermöglichen.

Eine andere Möglichkeit, dieses Problem zu lösen, ist unser nächstes Muster.

Beispiele



Das Fußzeile-Fixed-Muster (Footer Fixed Pattern) 

Wenn der Fußzeilenanker versucht, das Bildlaufproblem zu lösen, indem er Sie zum Menü führt, bleibt die Navigation durch dieses Muster sichtbar, so dass kein Sprung erforderlich ist.  Es verwendet feste Positionierung, um die Navigation am unteren Rand des Browsers zu halten.  Die Navigation am unteren Rand der Seite ist sehr nützlich auf sehr kleinen Bildschirmen und während dieses Muster derzeit nicht viel genutzt wird, wird es mehr genutzt.

Ansatz: Wegen der Anzahl der Links, die wir haben, verwenden wir das Fußzeilenankermuster auf den kleinsten Bildschirmen.  Sobald der Raum es zulässt, entfernen wir die Ankerschaltfläche und überführen das Menü so, dass es horizontal und unten am Browser fixiert ist.  Wir behalten es dort, bis genug Platz ist, um es an den Anfang der Seite zu verschieben.

Schritt 1: Der HTML-Code

Das HTML ist identisch mit dem, was wir oben mit dem Fußzeile-Anker-Muster gesehen haben.  Ernsthaft, hier gibt es absolut nichts zu sehen.  Weitergehen.

Schritt 2: Das Standard-CSS

Ja.  Identisch auch hier.  Wieder nichts zu sehen.  Gehen Sie bitte weiter.


Schritt 3: Die Medienabfragen

Endlich ein neuer Code.  Sobald der Browser auf 37.5em (600px) geöffnet ist, ist genug Platz, um das Menü horizontal zu positionieren.  Zuerst fügen wir einen Rand zur Fußzeile hinzu oder er bleibt hinter dem positionierten Menü.  Da das Menü sichtbar ist, brauchen wir den Anker-Button nicht mehr und wir schalten das Display aus.

Um die Navigation zu korrigieren, werden wir das Navigationselement gestalten.  Wir setzen seine Position auf fixed und geben ihm einen unteren Wert von 0. Der z-Index verhindert, dass das Guthaben angezeigt wird, wenn es hinter dem Menü ist. Jeder positive Wert wird funktionieren.  10 war willkürlich.  Wir geben dem nav-Element auch einen Hintergrund, und wir müssen die Breite auf 100% einstellen, da die Navigation standardmäßig nicht die volle Breite der Seite hat.

Alles andere ist dasselbe wie oben.  Innerhalb des nav-Elements sind die Links nach links verschoben und die Padings sind gesetzt.  Wir sollten auch die Hintergrundfarbe und den Farbverlauf entfernen, genau wie oben.  Ich schätze, wir sind hier fertig.  Weitergehen.

Tipps

Wiederum verwendet dieses Muster minimalen vertikalen Abstand oben auf der Seite.  Es löst sowohl das Problem der versteckten Navigation als auch einen Sprung zur Navigation, indem die Navigation jederzeit sichtbar bleibt.  Oder es hat fast getan.

In der Demo gab es zu viele Links, um die Fixposition unterhalb von 600px zu halten, also ließ ich das Footerankermuster bei diesen Größen an Ort und Stelle.  Besser wäre es gewesen, die Navigationsetiketten auf 4 oder 5 Wörter zu reduzieren oder sogar einen Schritt weiter zu gehen und Symbole zu verwenden.

Dieses Muster ist im Moment nicht so verbreitet.  Sie können sehen, dass ich nur 2 Beispiele gefunden habe, um Ihnen zu zeigen.  Angesichts der Tatsache, dass die meisten von uns unsere Daumen zum Navigieren verwenden, wenn sie mobile Geräte mit einer Hand halten, vermute ich, dass wir in Zukunft mehr von diesem Muster und Variationen davon sehen werden.

Beispiele


Zusammenfassung

Alle vier Muster sind Variationen eines Themas.  Anstatt die wertvollen und knappen vertikalen Immobilien oben auf der Seite zu verwenden, verschieben die Muster die Navigation zum unteren Rand der Seite.  Der Hauptvorteil ist, dass es Personen auf den kleinsten Bildschirmen ermöglicht, schnell auf Ihre Inhalte zuzugreifen und diese zu sehen.  Der Nachteil ist die Navigation ist ganz unten auf der Seite.

Die erste Variation des Musters bewegte die Navigation wieder nach oben, sobald der Platz erlaubt war.  Das hilft, aber es jagt immer noch und scrollt für das Menü auf kleinen Bildschirmen.  Der Fußzeilenanker korrigiert dies, indem er in der Kopfzeile wenig Platz für eine direkte Verknüpfung und einen schnellen Zugriff auf das Menü verwendet.  Es hinterlässt uns jedoch einen schnellen und potenziell verwirrenden Sprung auf der Seite.

Das festgelegte Fußzeilenmuster korrigiert das, indem das Menü am unteren Rand der Seite angezeigt wird.  Mit wenigen Navigationsetiketten oder der Verwendung von Symbole kann das Menü unabhängig davon, wie breit der Browser ist, immer sichtbar sein.

Wir haben noch mehr Muster, zu denen wir kommen können.  Nächstes Mal werden wir zum Anfang der Seite zurückkehren.  Wir passen uns an, was wir mit dem Fußanker gemacht haben. Anstatt uns zur Navigation zu bringen, werden wir die Navigation an Ort und Stelle zeigen.

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.