En plats med fast positionsnavigering är en som aldrig tillåter användaren att förlora platsen för kataloglänkarna när de bläddrar.
Detta enkla trick ger en webbplats som är otroligt lätt att navigera och är idealisk för specifika typer av innehåll. Nedan tar vi en titt på både de vanligaste och mest unika användningarna av fast navigering i webbdesign.
Bloggar
En av de vanligaste platserna hittar du fast navigering på bloggar, särskilt Tumblr-bloggar. Anledningen till att detta format fungerar så bra för bloggar är att de är notoriskt långa och därför involverar mycket rullning. Genom att använda en fast position i navigeringen kan användare navigera på din webbplats från hela vägen längst ned på en sida, vilket eliminerar det irriterande behovet att rulla tillbaka till toppen. Här är en lista över flera bloggar jag hittade med den här tekniken.
Brian Casel
På denna sida bor både länkarna längst upp och navigeringen till vänster med dig medan du rullar, vilket gör det väldigt enkelt att få tillgång till allt du behöver från vilken punkt som helst på webbplatsen. Navigationen till vänster tar dig inte till en annan del av webbplatsen, men filtrerar istället innehållet så att du bara kan se blogginlägg, citat, videoklipp etc.
David Appleyard
Den personliga bloggen till Design Shacks egen David Appleyard (shhhhh, han har ingen aning om att jag inkluderar detta). David har placerat en sökfält, information om sociala medier och olika länkar till andra webbplatser i sin fasta sidopanel, vilket gör det enkelt att få en snabb inblick i hela sitt digitala liv.
Doug Neiner
Doug Neiners Tumblr-sida följer samma format som Davids med de sociala länkarna och diverse uppgifter som är fasta på vänster sida av skärmen. Doug har också skapat ett snygg gränssnitt för sina inlägg som använder metallpoler och olika bilagor beroende på typ av inlägg. Totalt sett en unik design!
Jaype
I motsats till Doug Neins metallpoler använder Jaype ett mycket femininare tillvägagångssätt med ljusblå texturer och scrapbook-ish kanter. Sidospårnavigationen använder en fin dragspelseffekt för att expandera varje sektion för fler alternativ. En annan fin touch, sökfältet är fastsatt längst ner på sidan så det stannar kvar med dig när du ändrar storleken på fönstret.
Mark Jardine
I den här bloggen ser vi igen att sidofältet inte används så mycket för navigering inom webbplatsen, men som pekar på sociala medier och tillhörande innehåll. Mark är en designer för Tapbots, ett tvåmanslag av utvecklare som skapar några av de vackraste apparna som finns tillgängliga för iPhone.
Höger navigering
Att placera navigeringen på höger sida av sidan är ganska sällsynt och är faktiskt ett bra sätt att få användbarhet nazis riled up. Att tillämpa en fast position på din högra sida navigering ökar synligheten eftersom användaren interagerar med din webbplats och minskar risken för förvirring för var du ska hitta mer innehåll. Här är några exempel.
Fat-Man Collective
Fat-Man Collective är min absoluta favoritplats i detta inlägg av en enkel anledning: den feta mannen. Han är den här galna CG-karaktären som hänger upp längst upp till höger på skärmen. Han är rolig ser tillräckligt ut att jag skulle älska platsen för det här ensam, men när jag rullade igenom webbplatsen började den feta mannen gå! Jag skrattade högt när jag såg det här märkligt proportionerade, knubbiga karaktärs vandring tillsammans med knytningen flapping fram och tillbaka. Klicka på en av länkarna under hans fötter och sidan hoppar till en viss plats, vilket givetvis gör den feta mannen hoppa. Hats off till killarna som gjorde denna sida; det strålar ut med nördig awesomeness.
Piensa och Pixels
För allt jag vet är innehållet på den här sajten så roligt att det är den feta mannen (osannolikt). Ser som hur jag inte kan läsa ett ord av det men jag antar att den innehåller ganska enkelt portföljinformation. Piensa en Pixels är en enkel men attraktiv webbplats med länkar till olika projekt längst ner på höger sida av sidan.
Sisu
Sisu är ett litet designföretag med några stora klienter. Deras fasta navigering finns i ett band så att innehållet till vänster och illustrationerna till höger båda rullar medan länkarna stannar. Det ger en riktigt fin effekt och kommer till nytta när du rullar igenom de många utmärkelserna de har vunnit.
Horisontella webbplatser
Det är alltid lite uppfriskande att hitta en webbplats som bryter mot den typiska vertikala rullningsformen. Dessa platser använder fast navigering för att säkerställa att den horisontella naturen av upplevelsen inte orsakar att du förlorar din väg.
Netontwerp
Netdesign använder jQuery för att hantera den sidlediga animeringen som uppstår när du klickar på en länk. När webbplatsen rullar fram, fortsätter navigeringen till vänster och lättar in i designen av varje sida på ett otroligt smidigt sätt. Jag älskar den inneboende naturen på denna sida, som passar perfekt med den starka, nätbaserade designen.
f $ dsign
f $ dsign är en annan dos av horisontell åtgärd via JavaScript. Den här webbplatsen har fyra sektioner som kan nås enkelt med hjälp av den fasta navigationen till vänster på sidan. De galna illustrationerna gör den snabba rörelsen en rolig!
Ta mig om du kan
Vissa webbplatsdesigners vill ha funktionaliteten för fast navigering utan det fasta, statiska naturens fasta egenskaper. Lösningen är att göra det möjligt för navigationen att komma med på ritten medan du rullar, men att bygga in fördröjning så att det finns en sorts? effekt.
Astrel Creative
Den här ursprungliga webbplatsen innehåller en försvinnande navigationssektion. När du rullar ner slocknar navigeringen. När du slutar bläddra återkommer det magiskt med en trevlig övergång. Det är en subtil liten animering som verkligen ökar? Wow-faktorn? av webbplatsen.
Molitoren
Molitoren tar ett annat tillvägagångssätt till den efterföljande navigeringen som betonar att? Fånga upp? idén lite mer.När du rullar ner ser det ut som om navigeringen kommer att hållas högst upp på sidan. Men när du saktar eller stannar, sjunker navigeringen till sikte och lättar till ett stopp. Det här är roligt att leka med och är värd ungefär sex solida sekunder av underhållning.
Ännu mer!
Vill du ha mer inspiration? Fråga och du ska få min vän. Här är en massa fler exempel, bekvämt sorterade i fallande ordning av hur coolt och / eller unikt jag tycker att de är (alla är bra val). Njut av.
Irvine Acosta
Fudge
Black Estate
Gå Media
Ja jag sa ja
Ryan Dean-Corke
Domani Studios
Falla på
Quay Side
Vad tror du?
Det tog mig för evigt att finna att många platser använder fast navigering så jag hoppas verkligen att du gillade inlägget. Annars slösades bort den bättre delen av en dag på nätet när jag kunde ha gjort vad jag normalt gör på en viss dag? som definitivt inte bläddrar designbloggar och CSS-gallerier som en stor nörd. Ok, jag ljuger, det är precis vad jag gör hela tiden ändå.
Lama skämt åt sidan, använd kommentarerna nedan för att informera om vad du tycker om fastpositionsnavigering i allmänhet och vilket exempel du tyckte om det bästa. Du kan också gärna dela några exempel du hittar.