Share
Willkommen bei der zweiten in einer Serie, die auf responsive Navigationsmuster eingeht. Dieser Artikel führt Sie durch vier Muster, bei denen die Navigation zur Fußzeile wechselt und Platz auf der Seite einspart.
Um es zusammenzufassen. Im vorherigen Tutorial haben wir drei Muster entwickelt, bei denen die Navigation unabhängig von der Bildschirmgröße im Kopfbereich blieb. Das Ziel dieser Muster war es, den vertikalen Raum zu minimieren, wenn die Navigation auf kleineren Bildschirmen angezeigt wurde.
Heute werden wir die Dinge umdrehen und vier neue Muster entwickeln, bei denen sich die Navigation in der Fußzeile unseres Designs befindet. Wenn Sie unser Menü an den unteren Rand der Seite verschieben, sparen wir natürlich Platz am oberen Rand. Wie im vorigen Artikel sind diese Muster Ihnen wahrscheinlich durch Brad Frost bekannt, der sowohl auf reagierenden Sites verwendete Muster als auch einige komplexe Muster kompilierte.
Bei den drei Kopfmustern ging es uns hauptsächlich um den Platz, insbesondere um den vertikalen Raum und wie man nicht zu viel davon verwendet. Sie möchten, dass Besucher Ihre Inhalte so schnell wie möglich sehen. Dies ist jedoch nicht möglich, wenn die Navigation den gesamten Bildschirm einnimmt. Eine Möglichkeit, dieses Problem zu lösen, besteht darin, die Navigation zur Fußzeile zu verschieben.
Das eröffnet andere Herausforderungen. Besucher können zwar leichter auf den Inhalt zugreifen, müssen jedoch jetzt zum Seitenende blättern, um die Navigation zu entdecken.
Die Muster, die wir in diesem Artikel entwickeln werden, sind:
Jedes dieser Muster baut auf dem Muster davor auf. Zuerst verschieben wir die Navigation in die Fußzeile und fügen dann Variationen hinzu, die die Sichtbarkeit verbessern und den Zugriff erleichtern.
Wie im vorherigen Artikel zu den Kopfzeilen-Mustern halte ich den folgenden Code für das Menü und die zugehörigen Elemente. Den vollständigen Code erhalten Sie über den Download-Link oben. Sie können ihn auch sehen, indem Sie die Demo besuchen und den Quellcode anzeigen.
Wie der Name andeutet, bewegt das Muster nur der Fußzeile die globale Navigation zur Fußzeile. Alles in allem werden Sie dieses Muster wahrscheinlich nicht so verwenden, wie es ist. Dadurch wird zwar vertikaler Platz oben auf der Seite freigegeben, die Navigation wird jedoch ausgeblendet. Das funktioniert auf Smartphone-Bildschirmen zwar gut, macht aber bei einem Breitbild-Browser wenig Sinn.
Dieses Muster bildet jedoch die Grundlage für die anderen Muster, die darauf aufbauen und das Menü leichter zugänglich machen.
Ansatz: Auf den kleinsten Bildschirmen richten wir das Menü so ein, dass es am unteren Seitenrand als vertikale Liste von Links angezeigt wird. Dann gestalten wir sie, um sie attraktiver zu machen. Durch Medienabfragen wechseln wir das Menü von vertikal auf horizontal, das Menü bleibt jedoch immer am unteren Rand der Seite.
Da wir mit unserem Navigationscode umziehen, können wir uns einen Überblick über die Gesamtstruktur der Seite für einen bestimmten Kontext verschaffen. Bisher befand sich die Navigation innerhalb des Kopfelements mit dem Logo. Jetzt befindet es sich in der Fußzeile mit der Gutschrift.
Ansonsten ist es die gleiche Liste von Links, die wir im ersten Teil gesehen haben. Alles, was ich tat, war, den genauen Code in die Demo zu kopieren und von oben nach unten zu verschieben.
Standardmäßig zeigt eine Liste ihre Elemente als Elemente auf Blockebene an. Das ist es, was wir wollen, damit wir einen leichten Start haben. Die Standardstile sind hauptsächlich ästhetisch. Zuerst setzen wir den Rand und das Auffüllen der Liste auf 0 und entfernen die Aufzählungszeichen. Als Nächstes geben wir den Listenelementen einen oberen Rand und setzen den aktuellen Link in einer anderen Farbe.
# demo-nav margin: 0; Polsterung: 0; Listenstil: keine; # demo-nav li border: solid # 878382; Randbreite: 0 0 1px 0; # demo-nav li.current a color: # 9b9796; # demo-nav li.current a: hover color: # 111;
In ähnlicher Weise erhalten die übrigen Links eine Farbe und einige Auffüllung. Die Unterstreichung wird entfernt und die Verknüpfungen wurden so eingestellt, dass sie als Elemente auf Blockebene angezeigt werden, um den anklickbaren Bereich der Verknüpfung zu vergrößern. Je mehr Fläche Sie berühren können, um den Link zu aktivieren, desto besser für kleine Bildschirme und dicke Finger. Möglicherweise ist der Hintergrund interessant. Um visuelles Interesse zu wecken, entschied ich mich, den Links einen Verlauf zu geben und den Hintergrund beim Schweben etwas heller zu machen.
# demo-nav a color: #fff; Polsterung: 0,75 bis 5%; Textdekoration: keine; Bildschirmsperre; Hintergrundfarbe: # 575352; Hintergrundbild: -webkit-linearer Farbverlauf (oben, # 777372, # 676362); Hintergrundbild: -moz-linearer Farbverlauf (oben, # 777372, # 676362); Hintergrundbild: -ms-linear-gradient (oben, # 777372, # 676362); Hintergrundbild: -o-linearer Farbverlauf (oben, # 777372, # 676362); # demo-nav a: hover Hintergrundfarbe: # 777372; Hintergrundbild: -webkit-linearer Farbverlauf (oben, # 878382, # 777372); Hintergrundbild: -moz-linearer Farbverlauf (oben, # 878382, # 777372); Hintergrundbild: -ms-linear-gradient (oben, # 878382, # 777372); Hintergrundbild: -o-linearer Farbverlauf (oben, # 878382, # 777372); Farbe: # 111;
Wieder alles rein ästhetisch. Standardmäßig wurde im Menü eine vertikale Liste von Links angezeigt, und das ist alles, was wir wirklich brauchen.
Die vertikale Liste der Links, die wir oben gestaltet haben, funktioniert einwandfrei, bis die Breite des Browsers etwa 42,5 em (680 Pixel) beträgt. Zu diesem Zeitpunkt fühlt sich der horizontale Raum etwas zu leer an. Wir werden das Menü auf ein horizontales Menü umstellen, das sich noch am unteren Rand der Seite befindet.
Der Übergang erfolgt durch Verschieben der Links in der Liste nach links. Alles andere soll die Ästhetik wiederholen. Zuerst gab ich der Liste eine Hintergrundfarbe, die zwischen den Fußzeilen der Fußzeile und dem Kredit funktionieren würde. Ich habe auch etwas Polsterung und einen unteren Rand gegeben. Da nun die Links verschoben werden, fügte ich Überlauf hinzu: Die Liste wurde ausgeblendet, um das Öffnen der Liste zu erzwingen.
Die Links werden dann etwas aufgefüllt. Die 5% auf der linken Seite sind die gleichen Auffüllungen, die alles andere am linken Rand eingestellt hat. Ich habe den Rand entfernt, da die Links nicht mehr übereinander liegen und auch die Hintergrundfarbe dahinter entfernt. Da ich zuvor einen Verlauf im Hintergrund verwendet hatte, musste ich auch die Hintergrund-Bild-Eigenschaft der Links löschen, einschließlich des Hover-Status.
@media screen und (min-width: 42.5em) # demo-nav hintergrund: # 474342; Polsterung: 1,5 m 0; Rahmen unten: 1px fest # 878382; Überlauf versteckt; # demo-nav li border: 0; # demo-nav a padding: 0.75em 0 0.75em 5%; Schwimmer: links; Hintergrundfarbe: transparent; Hintergrundbild: keine; Randbreite: 0; # demo-nav a: hover Hintergrundfarbe: transparent; Hintergrundbild: keine;
Die nächste Medienabfrage besteht einfach darin, den Links etwas mehr Platz zu geben, wenn der Browser breiter wird.
@media screen und (min-width: 56em) # demo-nav a padding: 0.75em 1.5em 0.75em 5%;
Wir könnten die Dinge einfach so lassen und bei Bedarf immer mehr Platz zwischen den Links hinzufügen. Stattdessen entschloss ich mich, die Links herunter zu legen und auf der rechten Seite des Guthabens zu platzieren, sobald genügend Platz vorhanden war.
Zuerst habe ich die Liste nach rechts verschoben, was sie meistens in Position bringt. Nach einigen Anpassungen der Link-Polsterung ist diese vollständig vorhanden. Wir müssen auch den Hintergrund des gesamten Menüs entfernen, da die Fußzeilenfarbe der Hintergrund sein soll.
@media screen und (min-width: 64em) # demo-nav float: right; rechte Marge: 5%; Hintergrund: transparent; Grenze: 0; Polsterung: 1em 0; # demo-nav li display: inline; # demo-nav a padding: 0.5em 1.25em; # demo-nav a: hover color: # 777 # demo-nav li.current a: hover color: # 777; # demo-nav li: letztes Kind a padding-right: 0;
Bei der letzten Medienabfrage wird erneut der Abstand zwischen den Links angepasst. Wir werden hier aufhören, Sie können jedoch weitere Medienabfragen hinzufügen, um den Speicherplatz zu vergrößern.
@media screen und (min-width: 75em) # demo-nav a padding: 0.5em 1.75em;
Es gibt wirklich nicht viel zu diesem Muster, wenn Sie das HTML für die Navigation an den unteren Rand der Seite verschieben. Die Mehrzahl der oben genannten CSS ist ästhetisch gestaltet und Sie können Ihr Menü beliebig gestalten. An einem bestimmten Punkt möchten Sie wahrscheinlich von einem vertikalen Menü zu einem horizontalen Menü wechseln.
Das Schöne an der Fußzeile ist, dass sie funktionieren kann, egal wie viele Links Ihre Navigation enthält. Auf den kleinsten Bildschirmen können Sie so viel vertikalen Raum verwenden, wie Sie möchten, und sobald Sie Platz haben, können Sie diese Links horizontal nebeneinander anordnen. Der Schlüssel ist, um sicherzustellen, dass die Links genügend Platz um sie herum haben, sodass sie unabhängig voneinander berührt werden können, ohne einen anderen Link zu berühren.
Sie verwenden dieses Muster wahrscheinlich nicht mehr wie es ist und verwenden stattdessen eine der folgenden Variationen dieses Musters, die das Menü sichtbarer und zugänglicher machen.
Die folgenden Websites verwenden ausschließlich das Muster für die Fußzeile
Dieses zweite Muster ist nur eine Variation der Fußzeile. Bis zu 64em (1024px) ist es im Code fast identisch und sieht beim Anzeigen der Seite genauso aus. Anstatt die Navigation auf die rechte Seite der Fußzeile zu verschieben, sobald Platz vorhanden ist, verschieben wir sie auf die rechte Seite der Kopfzeile (siehe Abbildung oben).
Auf kleinen Bildschirmen müssen die Benutzer immer noch scrollen, um das Menü zu finden. Jetzt wird es jedoch oben auf der Seite angezeigt, wo die meisten Benutzer es auf breiteren Bildschirmen erwarten. Da der größte Teil des Codes identisch ist, werde ich nur darauf eingehen, wo sich die Muster unten unterscheiden.
Ansatz: Auf kleinen Bildschirmen machen wir dasselbe wie oben. Wir beginnen mit einem vertikalen Menü und sobald der Platz frei ist, wechseln wir das Menü zur horizontalen Anzeige. Wir werden uns unterscheiden, sobald der Bildschirm groß genug ist. Anstatt das Menü auf der rechten Seite der Fußzeile zu verschieben, verschieben wir es auf die rechte Seite der Kopfzeile.
Der einzige Unterschied in der HTML-Datei zwischen diesem und dem Fußzeilenmuster ist, dass die Navigation aus dem Inneren der Fußzeile entfernt wurde und sich jetzt direkt darüber befindet. Dies wirkt sich nicht auf die Anzeige auf kleinen Bildschirmen aus, aber es wurde ein wenig einfacher, die Navigation in die Kopfzeile zu verschieben.
Die einzige Änderung in der Standard-CSS ist unten. Da ich das Menü außerhalb der Fußzeile verschoben habe, brauchte es nur das geringste Styling, um einen oberen Rand einzufügen.
nav border-top: 1px fest # 878382;
Die ersten Medienabfragen (bei 42.5em und 56em sind identisch mit dem, was wir oben im Muster der Fußzeile gesehen haben. Der Unterschied tritt auf, wenn wir 64em erreichen. Oben habe ich das Menü auf die rechte Seite der Fußzeile verschoben. Hier werden wir verschiebe es auf die rechte Seite der Kopfzeile.
Vieles von unten ist ähnlich wie oben. Zu beachten ist vor allem die Positionierung auf dem Nav-Element, das unser Menü enthält. Wir können es diesmal nicht verschieben, da es sich am Ende der HTML-Struktur befindet. Stattdessen greifen wir zur Positionierung.
Während ich es nicht erwähnt habe, wird das Körperelement auf Position gesetzt: relativ. Damit können wir festlegen, dass das Navi absolut positioniert ist und die oberen und rechten Werte festgelegt werden.
Alles andere ist entweder dasselbe oder eine Veränderung von dem, was wir oben gesehen haben. Füllungen sind etwas anders und wir müssen immer noch den Hintergrund und den Rand des Menüs entfernen.
@media screen und (min-width: 64em) nav position: absolut; oben: 0; rechts: 5%; Hintergrund: keine; Grenze: 0; # demo-nav Hintergrund: transparent; Grenze: 0; Polsterung: 1em 0; # demo-nav li display: inline; # demo-nav a padding: 0.5em 1em; # demo-nav a: hover color: # 777 # demo-nav li.current a: hover color: # 777; # demo-nav li: letztes Kind a padding-right: 0;
Sobald die Navigation an den Anfang der Seite verschoben wurde, sind die restlichen Medienabfragen vorhanden, um die Auffüllung zwischen den Verknüpfungen zu erhöhen. Hier habe ich bei 90em gestoppt, aber Sie können so weit fahren, wie Sie möchten.
@media screen und (min-width: 75em) # demo-nav a padding: 0.5em 1.75em; @media screen und (min-width: 80em) # demo-nav a padding: 0.5em 2.1em; @media screen und (min-width: 90em) # demo-nav a padding: 0.5em 2.5em;
Dieses Muster hat die gleichen Vorteile wie das obere Fußzeilenmuster. Es kann mit beliebig vielen Links arbeiten. Noch besser wird die Navigation an den Anfang der Seite verschoben, sobald genügend Platz vorhanden ist. Wann dies der Fall ist, hängt von den Besonderheiten Ihres Designs ab. Der Schlüssel wiederum stellt sicher, dass die Ziele für die Verbindungen groß genug für die Finger sind.
Natürlich hat dieses Muster auch den gleichen Nachteil wie das Fußzeilen-Muster auf kleineren Bildschirmen, in dem die Personen noch scrollen müssen, um Ihre Navigation zu finden.
Das Fußzeilen-Ankermuster versucht, das Problem des Scrollen zu lösen, um zum Menü zu gelangen, indem ein Anker-Link oben auf der Seite direkt in das Menü eingefügt wird. Abgesehen von diesem Zusatz ist dieses Muster identisch mit dem gerade erzeugten Fußzeilen-Variationsmuster.
Ansatz: Auf kleinen Bildschirmen beginnen wir mit dem gleichen vertikalen Menü, mit dem wir bisher gearbeitet haben. Wir enthalten eine CSS-Schaltfläche, die uns beim Klicken direkt zur Navigation in der Fußzeile führt. Sobald der Bildschirm groß genug ist und wir die Navigation wieder an den Anfang der Seite verschieben, blenden wir die Ankerschaltfläche aus.
Das HTML ist bis auf eine Ausnahme identisch mit der obigen Fußzeilenvariation. Wir müssen oben auf der Seite einen Link hinzufügen, den wir als Schaltfläche gestalten. Wir verwenden die bereits vorhandene ID # demo-nav als Anker für den Link. Wenn Sie darauf klicken, wird die Seite neu geladen und am Ende der URL wird ein # demo-nav-Hash hinzugefügt, der Sie direkt zur Navigation bringt.
Speisekarte
Der einzige Unterschied in der Standard-CSS ist, dass wir den Link so gestalten müssen, dass er eher wie eine Schaltfläche aussieht und rechts neben der Kopfzeile positioniert wird. Wenn Sie den Link nach rechts verschieben und etwas Spielraum haben, wird die Position berücksichtigt.
Um es zu knöpfen, setzen wir zunächst den Link als Blockebene-Element und fügen etwas Auffüllung hinzu. Nachdem wir die Unterstreichung entfernt und die Farbe in Weiß geändert haben, fügen wir einen kleinen Rahmenradius und dann etwas Hintergrund hinzu.
Wieder verwenden wir einen Farbverlauf im Hintergrund, damit die Schaltfläche klickbarer wird. Für die ein oder zwei Browser, die damit nicht umgehen können, keine große Sache, aber für diejenigen, die dies können, wird der Button ein wenig tiefer. Für den Schwebeflug machen wir die Farben etwas heller.
.Anker Float: rechts; Rand oben: 1,25 em; Bildschirmsperre; Polsterung: 0,25% 2%; Farbe: #fff; Textdekoration: keine; Grenzradius: 0,25 em; Hintergrund: # 5b5756; Hintergrundfarbe: # 5b5756; Hintergrundbild: -webkit-linearer Farbverlauf (oben, # 6b6766, # 5b5756); Hintergrundbild: -moz-linearer Gradient (oben, # 6b6766, # 5b5756); Hintergrundbild: -ms-linearer Gradient (oben, # 6b6766, # 5b5756); Hintergrundbild: -o-linearer Gradient (oben, # 6b6766, # 5b5756); .anchor: hover Hintergrundfarbe: # 7b7776; Hintergrundbild: -webkit-linearer Farbverlauf (oben, # 8b8786, # 7b7776); Hintergrundbild: -moz-linearer Gradient (oben, # 8b8786, # 7b7776); Hintergrundbild: -ms-linearer Farbverlauf (oben, # 8b8786, # 7b7776); Hintergrundbild: -o-linearer Farbverlauf (oben, # 8b8786, # 7b7776);
In den Medienabfragen gibt es nur eine Neuheit. Bei 64em (wo wir die Navigation an den Anfang der Seite verschoben haben) müssen wir die Schaltfläche ausblenden und die Anzeige auf "none" setzen. Alles andere ist genauso wie im Variationsmuster der Fußzeile.
@media screen und (min-width: 64em) .anchor display: none;
Dieses Muster hat alle Vorteile der obigen. Der vertikale Abstand oben auf der Seite wird auf ein Minimum reduziert. Wie bei den anderen Mustern möchten Sie sicherstellen, dass die Link-Ziele groß genug sind. Der Anker macht die Navigation leichter zugänglich, wenn sie sich in der Fußzeile befindet.
Der Nachteil ist der Sprung vom oberen zum unteren Rand der Seite. Dies könnte Besucher verwirren, die nicht merken, dass sie zu Boden gesprungen sind. Eine Möglichkeit, einen Hinweis zu geben, ist das Hinzufügen eines Links "Zurück zum Anfang". Ich habe hier nicht eins hinzugefügt, aber es würde sowohl den Leser als auch den schnellen Zugriff auf den oberen Rand der Seite erleichtern.
Eine andere Möglichkeit, dieses Problem zu überwinden, ist unser nächstes Muster.
Wenn der Fußzeilenanker versucht, das Bildlaufproblem durch das Aufrufen des Menüs zu lösen, bleibt die Navigation in diesem Muster sichtbar, sodass kein Sprung erforderlich ist. Es verwendet eine feste Positionierung, um die Navigation am unteren Rand des Browsers zu halten. Die Navigation am unteren Rand der Seite ist auf sehr kleinen Bildschirmen sehr gut verwendbar, und obwohl dieses Muster derzeit nicht häufig verwendet wird, wird es zunehmend verwendet.
Ansatz: Aufgrund der vielen Links verwenden wir das Fußzeilen-Ankermuster auf den kleinsten Bildschirmen. Sobald es der Raum zulässt, entfernen wir die Ankerschaltfläche und wechseln das Menü so, dass es horizontal und am unteren Rand des Browsers fixiert ist. Wir werden es dort behalten, bis genug Platz vorhanden ist, um es an den Anfang der Seite zu verschieben.
Das HTML ist identisch mit dem, was wir oben mit dem Ankermuster der Fußzeile gesehen haben. Im Ernst, hier gibt es absolut nichts zu sehen. Weitergehen.
Ja. Auch hier identisch. Wieder nichts zu sehen. Bewegen Sie sich bitte.
Zum Schluss noch ein neuer Code. Sobald der Browser 37.5em (600px) geöffnet hat, ist genügend Platz vorhanden, um das Menü horizontal zu positionieren. Zuerst fügen wir etwas Rand unter der Fußzeile hinzu, oder er bleibt hinter dem positionierten Menü. Da das Menü sichtbar ist, benötigen wir die Ankerschaltfläche nicht mehr, und wir schalten die Anzeige aus.
Um die Navigation zu korrigieren, formatieren wir das Nav-Element. Wir setzen die Position auf "Fest" und geben ihm den untersten Wert "0". Der Z-Index verhindert, dass der Kredit durchscheint, wenn er sich hinter dem Menü befindet. Jeder positive Wert wird funktionieren. 10 war willkürlich. Wir geben dem nav-Element auch einen Hintergrund und müssen die Breite auf 100% setzen, da die Navigation standardmäßig nicht die volle Breite der Seite hat.
@media screen und (min-width: 37.5em) Fußzeile margin-bottom: 4em; .anchor display: none; nav position: fixed; unten: 0; z-Index: 10; Hintergrund: # 474342; Breite: 100%; # demo-nav padding: 0.5em 0; # demo-nav li border: 0; Anzeige: Inline; # demo-nav a padding: 0.75em; Schwimmer: links; Hintergrundfarbe: transparent; Hintergrundbild: keine; Randbreite: 0; # demo-nav a: hover Hintergrundfarbe: transparent; Hintergrundbild: keine;
Alles andere ist wie oben. Innerhalb des Nav-Elements werden die Links nach links verschoben und mit Auffüllungen versehen. Wir sollten auch die Hintergrundfarbe und den Verlauf entfernen, genau wie oben. Ich denke, wir sind hier fertig. Weitergehen.
Dieses Muster benötigt wieder einen 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 tat fast.
In der Demo gab es zu viele Links, um die feste Positionierung unterhalb von 600px zu halten, sodass ich bei diesen Größen das Fußzeilenankermuster belassen habe. Besser wäre es gewesen, die Navigationsbezeichnungen 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 üblich. Sie können sehen, dass ich nur zwei Beispiele gefunden habe, um Sie zu zeigen. In Anbetracht der Tatsache, dass die meisten von uns mit den Daumen navigieren, wenn Sie mobile Geräte mit einer Hand halten, werden wir vermuten, dass wir in Zukunft mehr von diesem Muster und seinen Variationen sehen werden.
Alle vier Muster sind Variationen eines Themas. Anstatt die wertvolle und seltene vertikale Fläche oben auf der Seite zu verwenden, verschieben die Muster die Navigation an den unteren Rand der Seite. Der Hauptvorteil ist, dass Menschen auf den kleinsten Bildschirmen Ihre Inhalte schnell sehen und darauf zugreifen können. Der Nachteil ist die Navigation ganz unten auf der Seite.
Die erste Variation des Musters bewegte die Navigation wieder an den oberen Rand, sobald Platz vorhanden war. Das hilft, aber es wird immer noch auf kleinen Bildschirmen nach dem Menü gesucht. Der Fußzeilenanker korrigiert dies, indem er ein wenig Platz in der Kopfzeile verwendet, um eine direkte Verbindung und einen schnellen Zugriff auf das Menü bereitzustellen. Dies führt jedoch zu einem schnellen und möglicherweise verwirrenden Sprung auf der Seite.
Das feste Muster der Fußzeile korrigiert dies, indem das Menü am unteren Rand der Seite sichtbar bleibt. Mit wenigen Navigationsbezeichnungen oder der Verwendung von Symbolen kann das Menü unabhängig von der Breite des Browsers immer sichtbar sein.
Wir haben noch mehr Muster, um dorthin zu gelangen. Nächstes Mal kehren wir zum Anfang der Seite zurück. Wir passen das, was wir mit dem Fußzeilenanker gemacht haben, an, anstatt uns zur Navigation zu bringen, zeigen wir die Navigation an Ort und Stelle.
Accentsconagua
Speisekarte