10 platser som gör vertikal navigering rätt
Flertalet webnavigationsmenyer flyter horisontellt över hela sidan. Det här kommer från en historia av traditionella bildskärmar som är bredare än högre.
Men med så mycket skärmutrymme är det nu möjligt för webbplatser att använda vertikala navigeringsmenyer istället. Och många av dem ser fantastiska ut.
Dessa 10 exempel på vertikala menyer är perfekta att studera för den unika designstilen och tydliga användbarhet.
1. Petersham Plantskolor
På Petersham Plantskolor webbplats hittar du en kapslad vertikal navigering. Denna teknik är inte något du hittar mycket ofta men det fungerar bra på den här webbplatsen.
Varje huvudnavlänk använder en ikon i bakgrunden för att förmedla länkarna visuellt. Och de två första länkarna öppnar undermenyerna justerade bredvid huvudmenyn. Dessa tar platsen för dropdowns som du normalt ser på horisontella menyer.
Den här webbplatsen är responsiv, så i mindre storlekar försvinner dessa länkar bakom en hamburger-meny. Detta skapar en rimlig delning mellan skrivbordsbrukare med tillräckligt med utrymme för vertikala länkar och mobila användare som gör det bättre med en horisontell navbar.
2. Arbor Restaurant
Ett annat mycket unikt exempel är Arbor Restaurant som har en ren vertikal nav med gott om utrymme mellan länkarna. Innehållet visas i en glidbehållare som också justerar vertikalt bredvid navigeringen.
Denna innehållsstil är ganska unik. De flesta vertikala navwebbplatser håller innehållet i linje med huvudsidan, men i det här fallet kan du enkelt visa / dölja innehållet. Det lägger till en viss känsla i vertikalnavigering som håller sidans momentum att flyta ner med innehållet.
3. Smokey Bones
Smokey Bones har två saker att gå för det: fantastisk mat och en mördare webbplats.
Varje sida använder den långa vertikala navigeringen fast till vänster. Detta är en häftklamma för de flesta webbplatser eftersom majoriteten av de västra läsarna förbrukar innehåll från vänster till höger, och det övre vänstra hörnet är den traditionella platsen för en webbplatslogotyp.
En extra funktion som jag gillar är menyn flyout noterar alla restaurangens rätter. Om du klickar på länken "meny" ser du hur det här också fungerar som en undermeny som läggs till vertikalt. Definitivt en cool idé som fungerar bra för en liten restaurangplats.
4. Mammoth Media
När du har mindre innehåll kan du komma undan med mer orimliga navigationsval. Mammoth Media är ett bra exempel som bara har fem huvudsidor på deras hemsida plus en blogg.
En specifik aspekt av denna navigering är den dolda rullgardinsfunktionen. Om du klickar på länken "Work" får du 2 alternativa länkar som du kan klicka igenom. De visas under huvudlänken så att de tar rollen som en mindre dropdown.
Även på mobilen följer denna navigering en liknande stil. Det är bevis på att när du inte har för många länkar kan du verkligen driva kreativitet.
5. Amazon
Alla och deras mormor vet om Amazon. Online-återförsäljaren har ett fantastiskt urval, men de har också en fantastisk UI-design med vertikala navlänkar på produktsökningssidor.
Amazon har dussintals kategorier för varje sökterm. Det innebär att de behöver ett sätt att presentera raffinerade sökfunktioner utan att överbelägga sidan. Vertikala navigeringar är bara meningsfulla eftersom de kan ta sig bort till sidan samtidigt som de är fullt tillgängliga.
Om du utformar någon liknande typ av filtrering nav rekommenderar jag definitivt att studera Amazons strategi. De har optimerat sin webbplats till ingen ände så det finns gott om anledning att tro att deras vertikala sorteringslänkar fungerar bra.
6. Corum
Corum s Webbplatsen har en annan ren vertikal navigering, med mycket enkla funktioner. All-caps länkar, mörk text, tydliga svängstilar och en stark kontrast mot huvudsidan.
Detta är en av de största aspekterna vid utformning av vertikal navigering. Du vill vanligtvis skapa en stark uppdelning mellan den vertikala navigeringsfältet och sidinnehållet. I detta fall görs det med en ljusare bakgrundsfärg med Corum-logotypen nära toppen.
Och mobila mottagliga användare får istället en rullgardinsmeny som fungerar som ett alternativ för skärmar som är längre än bredare.
7. Nua cyklar
Ett av de bästa sätten att använda en vertikal navigering är med en enda sidlayout. Informationssidor som Nua cyklar behöver inte alltid dussintals sidor full av innehåll.
Så med en vertikal nav-meny är det mycket lättare att bläddra igenom innehåll på ett infall med animeringar och anpassade sidor. I det här fallet blandar Nua Bikes nav i sidan eftersom den är direkt knuten till allt innehåll på den sidan.
8. Michael Ngo
En annan webbplats som följer den vertikala navutvecklingen för en sida är Michael Ngos portfölj .
Det har en ganska fängslande header-bild som omedelbart tar din uppmärksamhet och drar dig in. Men innehållet är den mest intressanta delen eftersom det hela fungerar via 3 olika länkar: hem, jobb och kontakt.
Nav-länkarna har egna undertexter för att du kan se vad de gör även vid en blick.
En sak att notera är hur naven stannar fast medan du rullar ner sidan. Detta håller alla länkar tillgängliga från vilken punkt som är avgörande i en mindre vertikal meny.
9. Medienstadt.koeln
Den tyska platsen Medienstadt.koeln har ganska annorlunda ta på vertikal navigering. Deras nav kvarstår gömd bakom en hamburger meny hela tiden, men den spänner fortfarande över hela skärmens höjd.
Det innehåller också fler länkar än bara den typiska topp horisontella naven. Det är meningslöst men kan vara förvirrande för vissa besökare.
Det jag gillar mest om den vertikala stilen är hur den stannar borta, även på skrivbord tills det behövs.
Beviljas det finns debatter om upptäckbarhetsproblem med hamburger menyer. Men jag tror att den här ikonen snabbt blir erkänd och denna design är ett utmärkt exempel på en dold vertikal navigering i åtgärd.
10. Metrick System
Annonsbyrån Metrick System håller sin navigering enkel och till viss del. Det följer den vertikala stilen men det är också mycket annorlunda än alla andra i det här inlägget.
Jag gillar den dolda rullgardinsmenyn som bara visar extra länkar när en primär länk är klickad. Deras "journal" länk är ett bra exempel. Nya länkar dyker upp till sidan och de bleknar med ett enda klick.
Mobila användare får en liknande upplevelse, utom att dessa undermenylänkar visas under huvudlänken. Men den här naven är så liten att den kan fungera för nästan alla skärmstorlekar.
Wrap Up
Vertikal navigering fungerar bäst på webbplatser som är beroende av extra skärmutrymme. Dessa inkluderar vanligtvis portföljplatser, restauranger, småföretag och e-handelsbutiker.
Men oberoende av webbplatsen kan du alltid försöka lägga till en vertikal navigering i din design. Och jag hoppas att dessa exempel kan komma igång med några bra idéer för trådframställning och mockupdesign.