Bei einer Site mit fester Positionsnavigation kann der Benutzer niemals die Site der Verzeichnisverknüpfungen beim Scrollen verlieren.
Dieser einfache Trick sorgt für eine Website, die unglaublich einfach zu navigieren ist und sich ideal für bestimmte Arten von Inhalten eignet. Im Folgenden werden sowohl die häufigsten als auch die einzigartigsten Anwendungen der festen Navigation im Webdesign beschrieben.
Blogs
Eine der häufigsten Stellen, an denen Sie feste Navigation finden, ist in Blogs, insbesondere Tumblr-Blogs. Der Grund, warum dieses Format für Blogs so gut funktioniert, ist, dass sie notorisch lang sind und daher viel Bildlauf erfordern. Durch das Anwenden einer festen Position auf die Navigation können Benutzer auf Ihrer Website ganz unten auf der Seite navigieren, wodurch das lästige Zurückblättern nach oben entfällt. Hier finden Sie eine Liste verschiedener Blogs, die ich mit dieser Technik gefunden habe.
Brian Casel
Auf dieser Site bleiben sowohl die Links oben als auch die Navigation auf der linken Seite beim Scrollen erhalten, sodass Sie von jedem beliebigen Punkt der Site aus ganz einfach auf alles zugreifen können, was Sie brauchen einen anderen Teil der Website, filtert den Inhalt jedoch so, dass nur Blogbeiträge, Zitate, Videos usw. angezeigt werden.
David Appleyard
Der persönliche Blog von Design Shacks eigenem David Appleyard (shhhhh, er hat keine Ahnung, dass ich das hier mitnehme). David hat eine Suchleiste, Social-Media-Informationen und verschiedene Links zu anderen Websites in seine festgelegte Seitenleiste eingefügt, um einen schnellen Einblick in sein gesamtes digitales Leben zu erhalten.
Doug Neiner
Die Tumblr-Seite von Doug Neiner hat dasselbe Format wie die von David. Die Links und sonstigen Informationen befinden sich auf der linken Seite des Bildschirms. Doug hat auch eine großartig aussehende Benutzeroberfläche für seine Beiträge erstellt, die je nach Art des Beitrags Metallstangen und verschiedene Anhänge verwendet. Insgesamt ein wirklich einzigartiges Design!
Jaype
Im Gegensatz zu den metallischen Stöcken von Doug Neiner verwendet Jaype einen etwas feminineren Ansatz mit hellblauen Texturen und scrapbookähnlichen Kanten. Die Sidebar-Navigation verwendet einen schönen Akkordeoneffekt, um jeden Abschnitt für weitere Optionen zu erweitern. Eine weitere nette Geste: Die Suchleiste ist am unteren Rand der Seite fixiert, sodass Sie bei der Größenänderung des Fensters dabei bleiben.
Mark Jardine
In diesem Blog sehen wir wieder, dass die Seitenleiste nicht so sehr für die Navigation innerhalb der Site selbst verwendet wird, sondern auf Social-Media-Sites und zugehörige Inhalte verweist. Mark ist ein Designer für Tapbots, ein zwei-köpfiges Team von Entwicklern, das einige der schönsten Apps für das iPhone entwickelt.
Navigation der rechten Hand
Platzieren Sie die Navigation auf der rechten Seite der Seite ist ziemlich selten und ist in der Tat eine großartige Möglichkeit, um die Benutzerfreundlichkeit von Nazis zu erhöhen. Durch das Anwenden einer festen Position auf die Navigation auf der rechten Seite wird die Sichtbarkeit erhöht, wenn der Benutzer mit Ihrer Website interagiert, und die Gefahr von Verwirrung bei der Suche nach mehr Inhalten verringert. Hier sind einige Beispiele.
Fat-Man-Kollektiv
Fat-Man Collective ist aus einem einfachen Grund meine absolute Lieblingsseite in diesem Beitrag: der dicke Mann. Er ist dieser verrückte CG-Charakter, der oben rechts auf dem Bildschirm hängt. Er sieht komisch aus, dass ich die Site allein lieben würde, aber als ich durch die Site scrollen wollte, begann der dicke Mann zu laufen! Ich lachte laut auf, als ich diesen seltsam proportionierten, pummeligen Charakter mit seiner Krawatte hin und her wandern sah. Klicken Sie auf einen der Links unter seinen Füßen und die Seite springt an einen bestimmten Ort, was den dicken Mann natürlich zum Springen bringt. Hut ab vor den Jungs, die diese Seite gemacht haben; es strahlt mit nerdy awesomeness aus.
Piensa und Pixel
Soweit ich weiß, ist der Inhalt dieser Website so lustig, dass er den dicken Mann übertrifft (unwahrscheinlich). Da ich jedoch kein Wort davon lesen kann, gehe ich davon aus, dass es ziemlich einfache Portfolio-Informationen enthält. Piensa und Pixels ist eine einfache, aber attraktive Site mit Links zu verschiedenen Projekten, die auf der rechten Seite der Seite ablaufen.
Sisu
Sisu ist eine kleine Designfirma mit einigen großen Kunden. Ihre feste Navigation ist in einem Bereich enthalten, so dass der Inhalt links und die Abbildungen rechts beide blättern, während die Links gesetzt bleiben. Es macht einen wirklich schönen Effekt und ist praktisch, wenn Sie durch die zahlreichen Auszeichnungen blättern, die sie gewonnen haben.
Horizontale Standorte
Es ist immer etwas erfrischend, eine Website zu finden, die den typischen, vertikalen Bildlauf durchbricht. Diese Sites verwenden eine feste Navigation, um sicherzustellen, dass Sie durch den horizontalen Charakter der Erfahrung nicht den Überblick verlieren.
Netontwerp
Netontwerp verwendet jQuery, um die seitliche Animation zu verarbeiten, die beim Klicken auf einen Link auftritt. Während die Site vorbeirollt, bleibt die Navigation auf der linken Seite fixiert und fügt sich nahtlos in das Design jeder Seite ein. Ich liebe die geschlossene Natur dieser Website, die perfekt zu dem starken, gitterbasierten Design passt.
f $ dsign
f $ dsign ist eine weitere Dosis horizontaler Aktion über JavaScript. Diese Website besteht aus vier Abschnitten, die über die feste Navigation auf der linken Seite der Seite leicht erreichbar sind. Die verrückten Illustrationen machen die schnelle Fahrt zum Spaß!
Fang mich wenn du kannst
Einige Website-Designer möchten die Funktionalität der festen Navigation ohne den langweiligen, statischen Charakter eines festen Elements. Die Lösung besteht darin, die Navigation beim Scrollen mitzunehmen, aber eine Verzögerung einzubauen, damit es eine Art Aufholjagd gibt. bewirken.
Astrel Creative
Diese ursprüngliche Site verfügt über einen verschwindenden Navigationsbereich. Wenn Sie nach unten scrollen, wird die Navigation ausgeblendet. Wenn Sie aufhören zu scrollen, erscheint es magisch mit einem schönen Übergang. Es ist eine subtile Animation, die den "Wow-Faktor" wirklich erhöht. Der Seite.
Der Molitor
Der Molitor verfolgt eine andere Herangehensweise an die nachlaufende Navigation, die den Nachhol- Idee ein bisschen mehr.Wenn Sie nach unten scrollen, scheint die Navigation oben auf der Seite zu bleiben. Wenn Sie jedoch langsamer fahren oder anhalten, zoomt die Navigation in den Sichtbereich und macht zum Stoppen. Es macht Spaß, damit zu spielen, und ist ungefähr sechs Sekunden lang Unterhaltung wert.
Sogar mehr!
Wünschen Sie mehr Inspiration für das festgelegte Navi? Fragen Sie und Sie sollen meinen Freund empfangen. Hier sind ein paar weitere Beispiele, die in absteigender Reihenfolge sortiert werden, wie cool und / oder einzigartig sie meiner Meinung nach sind (alle sind eine gute Auswahl). Genießen.
Irvine Acosta
Fudge
Schwarzer Nachlass
Gehen Sie auf Media
Ja sagte ich ja
Ryan Dean-Corke
Domani Studios
Fallen auf
Kai Seite
Was denkst du?
Ich habe ewig gebraucht, um so viele Seiten mit fester Navigation zu finden, also hoffe ich, dass Ihnen der Beitrag gefallen hat. Ansonsten habe ich den größten Teil des Tages damit verbracht, das Web zu durchsuchen, wenn ich an einem bestimmten Tag das tun könnte, was ich normalerweise tue? Das ist definitiv nicht das Durchsuchen von Design-Blogs und CSS-Galerien wie ein großer Nerd. Ok, ich lüge, genau das mache ich sowieso immer.
Lahme Witze beiseite, verwenden Sie die Kommentare unten, um uns mitzuteilen, was Sie über die Navigation mit festen Positionen im Allgemeinen denken und welches Beispiel Ihnen am besten gefallen hat. Sie können auch gerne alle Beispiele teilen, die Sie finden.