10 websteder gør vertical navigation højre
De fleste webnavigationsmenuer flyder vandret over hele siden. Dette kommer fra en historie med traditionelle skærme, der er bredere end højere.
Men med så meget skærmrum er det nu muligt for websteder at bruge vertikale navigationsmenuer i stedet. Og mange af dem ser fantastisk ud.
Disse 10 eksempler på vertikale menuer er perfekte til at studere for den unikke design stil og særskilte anvendelighed.
1. Petersham Planteskoler
På den Petersham Planteskoler hjemmeside finder du en indlejret lodret navigation. Denne teknik er ikke noget, du finder meget ofte, men det fungerer godt på dette websted.
Hver vigtigste nav-link bruger et ikon i baggrunden til at formidle forbindelserne visuelt. Og de to første links åbner undermenuer rettet ud for hovedmenuen. Disse tager plads til dropdowns, som du typisk ser på vandrette menuer.
Denne side er lydhør, så i mindre størrelser forsvinder disse links bag en hamburger-menu. Dette skaber en rimelig deling mellem stationære brugere med tilstrækkelig plads til vertikale links og mobilbrugere, der bedre kan gøre med en vandret navbar.
2. Arbor Restaurant
Et andet meget unikt eksempel er Arbor Restaurant som har en ren vertikal nav med god plads mellem links. Indholdet vises i en glidende beholder, som også justerer lodret ved siden af navigationen.
Denne indholdsstil er ret unik. De fleste vertikale nav-websteder holder deres indhold tilpasset hovedsiden, men i så fald kan du nemt gemme / skjule indholdet. Det tilføjer en vis flair i den vertikale navigation, der holder sidernes momentum flydende ned med indholdet.
3. Smokey Bones
Smokey Bones har to ting går til det: fantastisk mad og en dræber hjemmeside.
Hver side bruger den lange lodrette navigation fastgjort til venstre side. Dette er en hæfteklamme for de fleste hjemmesider, fordi de fleste vestlige læsere bruger indhold fra venstre mod højre, og øverste venstre hjørne er det traditionelle sted for et webstedlogo.
En tilføjet funktion jeg kan lide er menuen flyout notering alle restaurantens retter. Hvis du klikker på linket "menu", kan du se, hvordan det også fungerer som en undermenu, der tilføjes lodret. Absolut en cool ide, der fungerer godt for en lille restaurant site.
4. Mammoth Media
Når du har mindre indhold, kan du komme væk med mere offbeat navigation valg. Mammoth Media er et godt eksempel, som kun har fem hoved sider på deres hjemmeside plus en blog.
En specifik facet af denne navigation er den skjulte rullemenuefunktion. Hvis du klikker på linket "arbejde" får du 2 alternative links, du kan klikke igennem. De vises under hovedlinket, så de spiller rollen som en mindre dropdown.
Selv på mobilen følger denne navigation en lignende stil. Det er bevis på, at når du ikke har for mange links, kan du virkelig skubbe kreativiteten.
5. Amazon
Alle og deres bedstemor ved om Amazon. Online-forhandleren har et fantastisk udvalg, men de har også et fantastisk UI-design med vertikale nav links på produktsøgningssider.
Amazon har snesevis af kategorier for hvert søgeord. Det betyder, at de har brug for en måde at præsentere raffinerede søgefunktioner uden at overbelaste siden. Lodrette navigationer giver bare mening, fordi de kan gemme væk til siden, mens de stadig er fuldt tilgængelige.
Hvis du designer en lignende type filtreringsnav, anbefaler jeg bestemt at studere Amazonas strategi. De har optimeret deres websted til ingen ende, så der er masser af grund til at tro på, at deres lodrette sorteringsforbindelser fungerer godt.
6. Corum
Corum s Webstedet har en anden ren vertikal navigation med meget enkle funktioner. All-caps links, mørk tekst, clear hover stilarter og en stærk kontrast til hovedsiden.
Dette er et af de største aspekter ved design af vertikal navigation. Du vil typisk skabe en stærk deling mellem den vertikale navigationslinje og sidens indhold. I dette tilfælde er det gjort ved hjælp af en lysere baggrundsfarve med Corum-logoet nær toppen.
Og mobile lydhørige brugere får i stedet en dropdown-menu, der fungerer som et alternativ til skærme, der er længere end bredere.
7. Nua Cykler
En af de bedste måder at bruge en vertikal navigation på er med et enkelt sidelayout. Informationssteder som Nua Cykler behøver ikke altid snesevis af sider fyldt med indhold.
Så med en vertikal nav menu er det langt nemmere at gennemse indhold på et indfald ved hjælp af animationer og brugerdefinerede side områder. I dette tilfælde blander Nua Bikes nav sig ind på siden, da den er direkte bundet til alt indhold på den pågældende side.
8. Michael Ngo
Et andet websted, der følger den ene side vertikale nav tendens er Michael Ngos portefølje .
Det har et fængslende headerbillede, som straks tager fat på din opmærksomhed og trækker dig ind. Men indholdet er den mest interessante del, da det hele fungerer via 3 forskellige links: hjemme, arbejde og kontakt.
Nav-linkene har også deres egne undertekster, så du kan se, hvad de gør, selv med et overblik.
En ting at bemærke er, hvordan naven forbliver fast, mens du ruller ned på siden. Dette holder alle links tilgængelige fra ethvert punkt, som er afgørende i en mindre vertikal menu.
9. Medienstadt.koeln
Det tyske websted Medienstadt.koeln har ret anderledes tage på vertikal navigation. Deres nav forbliver skjult bag en hamburger menu til enhver tid, men det spænder stadig over hele skærmens højde.
Det indeholder også flere links end blot den typiske øverste vandrette nav. Dette giver mening, men kan være forvirrende for nogle besøgende.
Hvad jeg mest kan lide om den vertikale stil er, hvordan det forbliver gemt væk, selv på desktops, indtil det er nødvendigt.
Bevilget der er debatter om problemer med opdagelse med hamburger menuer. Men jeg tror, at dette ikon hurtigt bliver anerkendt, og dette design er et glimrende eksempel på en skjult lodret navigation i aktion.
10. Metrick System
Annoncebureauet Metrick System holder deres navigation enkel og til punktet. Det følger den lodrette stil, men det er også meget anderledes end alle de andre i dette indlæg.
Jeg kan godt lide den skjulte rullemenode, der kun viser ekstra links, når et primært link er klikket. Deres "journal" -link er et godt eksempel. Nye links vises ud til siden, og de falder i vis med et enkelt klik.
Mobilbrugere får en lignende oplevelse, undtagen disse undermenuforbindelser vises under hovedlinket. Men denne nav er så lille, at den kan fungere for stort set hver skærmstørrelse.
Wrap Up
Lodret navigation fungerer bedst på websteder, der er afhængige af ekstra skærmrum. Disse omfatter typisk porteføljesider, restauranter, små virksomheder og e-handelsbutikker.
Men uanset webstedet kan du altid forsøge at tilføje en vertikal navigation til dit design. Og jeg håber, at disse eksempler kan komme i gang med nogle gode ideer til wireframing og mockup design.