Hamburgerikon: nye måter å bruke det på. Hvorfor du bør unngå hamburgermenyer og hvordan du gjør det

Du vil ha vanskeligere for å gi informasjon til brukeren om et spesifikt element hvis det bare er synlig når brukeren åpner menyen på jakt etter et annet element.

Du kan gjøre det som i Jawbone Up-applikasjonen: vis et ikon som gjenspeiler essensen av varselet ved siden av knappen sidemeny.

Denne tilnærmingen skalerer ikke særlig godt fordi den innebærer å skape stor kvantitet spesielle ikoner, og du som designer vil noen ganger måtte bruke standardikoner som har mindre betydning.

Her er det motsatte eksempelet: Twitters fanelinje, som viser brukeren konteksten for varselet og lar brukeren gå direkte til den aktuelle skjermen.

Bevissthet om problemet

Det kan virke som du forpliktet gjør alt dette for å spare mer skjermeiendom, men vi misforstår ofte hva folk faktisk ser. Det kan virke for deg som om folk ser alt som er foran øynene deres, men i virkeligheten har vi alle en viss konsentrasjonssone, selv om skjermstørrelsen er minimal ().

Derfor kan problemet med å spare skjermplass løses uten at det går på bekostning av navigasjonen — og iht. grunnleggende prinsipper HCI (Human Computer Interaction) som krever at vi leverer tilbakemelding og viser applikasjonsstatus.

Merk: Du må kanskje friske opp forståelsen din av HCI-prinsippene — Jeg er ganske sikker på at dette vil hjelpe deg å unngå mange designfeil som folk med en visuell tilnærming til design gjør.

Løsning

Vi har snakket mye om problemet, men løsningen er fortsatt ikke klar.

Når kan du bruke hamburgermenyen?

I noen svært sjeldne tilfeller er dette mønsteret faktisk berettiget, men generelt bør det unngås.

IRCCloud er et eksempel på en berettiget (til en viss grad) bruk av hamburgerknappen: den brukes til å navigere mellom kanaler og kanaldeltakere.

Dette er akseptabelt fordi hovedskjermen ikke har noen underordnede skjermer som trenger hierarkisk navigering; alt innhold presenteres i en modal form.

Men selv i dette tilfellet er det klart at grensesnittet er overbelastet, og informasjonsarkitekturen krever revisjon.

Sidemenyen som viser kanalmedlemmer (til høyre) tar plassen til en handlingsknapp, der alle handlinger relatert til kanalene kan skjules. I stedet måtte designerne blande alt mulige handlinger(relatert til kanaler, nettverk og konto) i én handlingsmeny:

Dette bringer oss jevnt til neste del av artikkelen:

Hvordan erstatte hamburgerknappen?

Sidemenymønsteret innebærer dårlig informasjonsarkitektur: En hamburgerknapp er et annet grensesnittelement som ikke viser noen handlingssekvens — før folk bruker den.

"Løsningen er å oppdatere informasjonsarkitekturen."

Bildene ovenfor er et eksempel på hvordan du kan unngå sidemenyen. Fargede prikker hjelper deg med å spore hvordan grensesnittelementer har blitt omorganisert.

Konklusjoner:

1. Statusen vises på fanen Meldinger
2. Grensesnittelementer er alltid synlige og tilgjengelige
3. Ingen konflikt mellom navigasjonsbevegelser

I tillegg til å løse hovedproblemene, kan vi få litt vertikal plass ved å skjule appens navigasjonslinje når vi scroller ned (se Facebook for et eksempel, men dette brukes også i Safari). Fanelinjen forblir på plass, slik at vi kan navigere selv når appens navigasjonslinje er skjult.

Hvis du er i et minimalistisk humør, vil kanskje en verktøylinje være tilstrekkelig. Poenget er å synliggjøre navigasjonen, gi direkte tilgang til funksjoner, unngå konflikter mellom navigasjonsbevegelser og vise varsler på ikonene de tilhører.

[Oppdater] Når det gjelder nettsteder, bør du også revurdere informasjonsarkitekturen, men i stedet for å bruke disse iOS-mønstrene, anbefaler jeg å vise navigasjonen øverst, i en liste: eksempel. Hvis det er åpenbart at dette er nettstedets navigasjon, vil folk definitivt rulle videre og umiddelbart se alle de andre tilgjengelige alternativene.

Også komme tilbake til temaet nettsteder på mobile enheter ah: ikke glem å fjerne trykkforsinkelsen på 300 ms ved å bruke disse tipsene eller bruke berøringshendelser.

Hvordan skalerer alt dette?

Her gir jeg eksempler på iOS-grensesnitt — den beste løsningen på dem er bruk av et panel med faner eller verktøy.

Men hva om fanelinjen har mer enn 5 elementer?

I slike situasjoner er det første du må gjøre å revurdere informasjonsarkitekturen til applikasjonen. Men hvis du fortsatt må gå utover de fem fanene, brukes vanligvis følgende metode: siste fanen gir tilgang til en liste over gjenværende alternativer.

Denne implementeringen står overfor et annet problem: etter rulling forblir verktøylinjen i en udefinert tilstand. Rookie skjuler panelet etter at brukeren har valgt en av handlingene — beskjære, rotere osv. Dermed, ubestemt tilstand panelet er "tilbakestilt", og når det åpnes på nytt, vises det i sin opprinnelige tilstand.

Konklusjon

Så du har lest en artikkel om problemene med sidefeltmønsteret og løsningen deres i iOS, som ble innebygd i systemet helt fra begynnelsen.

Jeg håper artikkelen var nyttig og forståelig for deg. Hvis du har noen kommentarer, vennligst skriv til meg

Du er sikkert allerede lei av å lese artikler og hele tiden lytte til ulike diskusjoner om tre korte linjer hamburgermeny. Er dette en dårlig UI-designteknikk? Eller ikke dårlig? Dette innlegget er annerledes - det vil ikke bedømme om denne menyen er god eller dårlig. Poenget er at jeg ikke tror det er den beste designbeslutningen, på en eller annen måte. Men hamburgermenyen har også sin egen styrker, spesielt når det brukes i mobildesign, under forhold med begrenset plass. Så hva kan vi gjøre? Bare godta hamburgermenyen slik den er, til tross for alle manglene, og gå videre med livet? Mange nettsteder og apper ser ut til å ha forsonet seg med dette. Og jeg tror at jeg er i stand til det beste.

Og så skjedde to ting som fikk meg til å ombestemme meg. Først kom jeg over. Dette er en artikkel som virkelig hjelper til med å forstå implikasjonene av å bruke en hamburgermeny. Spesielt nettsteder med slike menyer lider av en alvorlig nedgang i brukerengasjement. En gjennomgang av slik statistikk begynte bare å endre min mening.

Den neste hendelsen skjedde da jeg observerte en kollega som prøvde å bruke en ny nettapplikasjon som hadde akkurat en slik meny. Dette var en utvikler som var veldig kjent med hamburgermenygrensesnittet, men når det kom til å bruke applikasjonen for sine behov, spurte han høyt: "Hvordan kommer jeg dit?" Vær oppmerksom på at dette er en av de de smarteste menneskene, det vet jeg, og han tenkte ikke engang på å berøre hamburgermenyikonet. Hvis noen så smarte har problemer med å navigere, hva sier det om den typiske brukeren? Min mening har endelig fått et solid fundament.

Å finne en løsning

Det er nok om årsakene til min vantro på kraften i hamburgermenyen - det er på tide å snakke om løsningen. Først så jeg på de spesifikke fordelene ved å bruke en hamburgermeny:

• Skalerbarhet: dette er sannsynligvis det viktigste pluss og hovedårsaken, hvorfor så mange nettsteder og applikasjoner velger det. Du kan få plass til mange navigasjonselementer bak et lite ikon.
• Nøyaktighet: dette går hånd i hånd med skalerbarhet, men fortsatt ikke det samme. Designere ønsker å lage kortfattede og ryddige design, som gir nok plass til hovedinnholdet. Å bruke en hamburgermeny gir en følelse av visuell enkelhet som er attraktiv for enhver designer.

Og hvis vi skal lage et alternativ til hamburgermenyen, må den på en eller annen måte løse problemene knyttet til den:

• Forståelighet: Navigasjonselementer skal være lett å finne, spesielt av de som bruker produktet for første gang.
• Engasjement: Grensesnittet skal gi hint og tilbakemeldinger som forklarer hva brukeren kan gjøre med produktet og når det er hensiktsmessig å bruke visse funksjoner.

Den vanskelige delen: mobil

Jeg bestemte meg for å begynne med det meste sammensatt problem og sjekk om løsningen min passer for mobildesign. Etter å ha fundert over massevis av ideer, kom jeg til den konklusjon at iOS-fanelinjemenyen er en av de beste løsningene for mobile grensesnitt. Mange mennesker har prøvd å gjøre fanelinjen rullbar (for å passe til mer enn fem alternativer) eller legge til "mer" i navigasjonen - noe som Plyushkin, som har et ekstra rom som raskt fylles med søppel. Dessuten oppfyller begge disse alternativene fortsatt ikke hovedkravet - klarhet, synlighet av alle muligheter mangler. Så hva kan du gjøre med fanemenyen for å fikse dette?

Min løsning er å kombinere hamburger- og tabulatorlinjen til en enkelt tilnærming. Resultatet er en fanelinje som åpner et sett med alternativer for hvert menyelement.

Jeg skapte testapplikasjonå evaluere teamets produktivitet for å illustrere tilnærmingen din i handling. Ved å bruke denne metoden kan brukeren tydelig se hovedfunksjonene og bruksområdene til produktet. Og i stedet for å sovne full liste menyelementer skjult bak hamburgerikonet, får brukeren vist flere alternativer som er relatert til fanen han klikket på. Dette gjør navigasjonen enklere å forstå og fordøye, alt du trenger er alltid tilgjengelig, og lar brukeren se hierarkiet til applikasjonen.

En annen fordel med denne designen er muligheten til å bruke kontekstuelle varsler. Når det gjelder en hamburgermeny, har du bare ett sted å vise disse varslene. Hvis du holder deg til et fanefeltoppsett, kan du gi hint til brukeren om hvilket som helst av menyelementene de velger.

Selvfølgelig er den største gevinsten ved denne tilnærmingen skalerbarhet. Ja, du er fortsatt begrenset til fem kategorier, men det er en god ting. Ærlig talt, jeg tror ethvert nettsted kan passe sine alternativer inn i fem kategorier hvis designeren tenker gjennom navigasjonen klokt. Tross alt, i hver av disse kategoriene kan det være fem eller seks flere underelementer.
Totalt er det 30 mulige navigasjonsmuligheter uten følelse av overbelastning for brukeren og uten å oppta hele skjermplassen.

Applikasjon på nettbrett

Å integrere en slik fanelinje i nettbrett som det virket merkelig. Nettbrett er mye mer allsidige, og å bruke samme brukergrensesnitt som mobile enheter så like vanskelig ut som en tenåring i klær som han for lengst hadde vokst ut av. Så jeg gikk en annen vei. I stedet for å plassere fanestangen nederst, plasserte jeg den på siden. Dette viste seg å være mer praktisk med tanke på å bruke skjermplass og så veldig naturlig ut. I tillegg holder mange brukere nettbrettet ved siden, så dette er målområdet for fingerberøring.

Hva med skrivebordet?

Gjør deg klar...uttrekksmeny. Det er riktig - prøv denne tilnærmingen på et skrivebordsgrensesnitt, og du vil bli møtt med en ubestridelig realitet: dette alternativet er ikke nytt i det hele tatt. Skyvemenyer har eksistert i årevis, og nesten alle (til og med moren din) vet hvordan det fungerer. Det er det fine med denne tilnærmingen - det er ikke noe nytt.

Full avsløring

Jeg vet ikke hva jeg skal kalle denne greia. Innleggsglider? Eller TABurger (TAB "tab" + burger)? Dessuten vet jeg ikke om noen har laget en lignende løsning før. Med tanke på at en slik meny er enkel, orker jeg ikke å tro at jeg var den første. Jeg vet at noen få apper bruker uttrekkbare menyer på noen faneknapper (som Tweetbot), men de er vanligvis implementert slik rask tilgang til funksjoner for avanserte brukere, og ikke med det formål å øke navigasjonshierarkiet. Hvis du har et slikt eksempel, gi meg beskjed i kommentarene.
Det spiller ingen rolle om en slik meny er ny eller lenge har blitt oppfunnet. Det som betyr noe er om det er en bedre, mer kreativ navigasjonsløsning enn en hamburgermeny. Slutt å si til deg selv "Dette kule nettstedet har denne menyen, så det må være det beste" eller "Alle gjør det, så det må være riktig." Design fortjener en bedre, mer gjennomtenkt tilnærming.
OPPDATERINGER
Collin Eberhardt bemerket på Twitter at det samme brukergrensesnittet er implementert i Windows telefon. jeg selv Windows-bruker Ring, og han har rett. Selv om denne typen interaksjon bare brukes i Windows Phone for alternativet "mer" i fanelinjen.

James Perich ga et annet eksempel på Twitter. Ta en titt på AHTabBarController laget av Arthur Hemmer.

Hamburgerikonet er overalt. Overalt rundt oss. I nettapplikasjoner, på mobil- og skrivebordssider, i programvare. Dette allestedsnærværende tre-linjers ikonet er så vanlig i disse dager at det virker som om det er unikt assosiert med navigasjonsmenyen. Men er det det?

I I det siste diskusjoner om effektiviteten til hamburgerikonet har nådd nye høyder. Artikler av fremtredende designere, og flere nettsteder, inkludert The Atlantic, TechCrunch, The Next Web og Nielsen Norman Group, konkluderer med at dette er et UX-antimønster, et trendy og lett-å-implementere ikon som er en regresjon fra enklere, mer uttrykksfulle alternativer.. Men antimønster eller ikke, bruken av ikonet har vokst så mye at det nesten er fast inventar på de fleste nettsider, spesielt på små skjermer.

Gitt min posisjon som designer på m.booking.com-teamet, og vår bruk av dette ikonet for å vise en uttrekkbar meny, bestemte jeg meg for å utforske dette objektet. Jeg begynte med å studere opprinnelsen til ikonet for å prøve å forstå veien til vanære.

Dette høres lovende ut. Men selv om ikonet er en klassiker og har eksistert for alltid, har webdesignere vært mindre konsekvente i bruken. Ikonet har blitt brukt til lister, dra og omorganisering, justering og mer. Kanskje dette misbruket forklarer kritikken som et menyikon. Kanskje på grunn av den brede distribusjonen og ulike bruksområder dette ikonet har mistet evnen til å formidle en enhetlig metafor og etterlater brukerne forvirret.

Hele denne historien fikk meg til å stille spørsmål: «Tar vi virkelig feil og alle andre har rett? Medfører dette ulemper for brukerne våre? Er det folk som faktisk forstår hva de tre små linjene på nettstedet vårt er?»

Vanlige lesere av denne bloggen vil ikke bli overrasket over å høre at vårt neste skritt var å stille disse spørsmålene i form av en A/B-test. Som alt annet var hamburgerikonet underlagt påvirkning fra våre mange kunder som gjennom interaksjon med menyen måtte avgjøre om ikonet var den beste løsningen. På dette tidspunktet hadde jeg lest nok artikler og informasjon til å være sikker på at mangelen på konsensus eller ulike resultater ikke skyldtes oppførselen til kundene som designet ble utviklet for. Jeg bestemte meg for å følge metoden beskrevet James Foster, referert av mange, inkludert en av våre beste mobilspesialister — Luke Wroblewski.

Vi har tidligere testet flere ikonplasseringer og stiler (med kant, uten kant, med ikon, forskjellige farger osv.), men vi har aldri testet ordet "Meny" på grunn av kompleksiteten i vårt ønske om å teste i førti- ett språk, støttet av oss. Vi gikk imidlertid videre, fant oversettelsene ved hjelp av vårt team av språkeksperter og kjørte testen:

Vårt originale "hamburger"-menyikon er til venstre for tittelen og med en hvit skillelinje til høyre.

Ordet "Meny" inne i en blokk med en hvit ramme med avrundede hjørner, er også venstrejustert.

Vi lanserte et eksperiment på tvers av hele brukerbasen vår. Og også, gitt populariteten og allestedsnærværende til dette elementet brukergrensesnitt, håpet det ikke ville ta lang tid å teste millioner av våre kunder rundt om i verden, på alle støttede språk og stort nummer enheter.

Så hva er sluttresultatet? Beseiret ordet hurtigmat, slik det gjorde i James Fosters eksperiment, eller vil bollen og koteletten vinne?

resultater

I dette eksperimentet hadde ikke det å erstatte ikonet med ordet «Meny» noen betydelig innvirkning på oppførselen til brukerne våre. Ved hjelp av vår enorme brukerbase kan vi, veldig høy grad Det er sannsynlig at, spesielt for besøkende på Booking.com, spiller hamburgerikonet sin rolle på samme måte som versjonen med en tekstbeskrivelse.

Selvfølgelig kan vi ikke ekstrapolere disse dataene til alt. I noen land, på noen språk eller enheter, kan det ha fungert bedre eller verre. Men på verdensbasis kan vi konkludere med at «hamburgeren» har blitt latterliggjort for mye. Totalt sett var det like gjenkjennelig som ordet "Meny." I ånden av å administrere designfremgang, bør vi sannsynligvis vurdere andre alternativer, og kanskje prøve å legge til ost, et utslett av bacon og pommes frites til hamburgerikonet vårt, men foreløpig er vi glade for å kunne rapportere at vår "trelinjers venn" er pusset over alt. Den faktiske plasseringen, formen, størrelsen, plasseringen og fargen er selvfølgelig et emne for fremtidig testing.

Dette er absolutt en leksjon for oss alle om A/B-testingens natur. Du tester aldri UI-elementene, modellen eller funksjonen som helhet. Du tester disse tingene på et veldig spesifikt brukerpublikum under spesifikke og spesifikke scenarier. Det som fungerer for Booking.com fungerer kanskje ikke for deg eller brukerne dine. Dette er en av grunnene til at vi gjorde A/B-testingen vår. Funn fra andre eksperter, data fra andre nettsteder eller hypoteser laget på en pub mens du spiser en burger vil alle være ubevist før de er testet med våre kunder og på vår plattform.

Ikke for å gå seg vill i vår egen metafor, men det er som en oppskrift på en god hamburger. Selv om du skrev ned alle ingrediensene nøyaktig etter meg, vil du ende opp med en helt annen hamburger. Dette vil selvfølgelig bli påvirket av kvaliteten på kjøttet som er tilgjengelig på markedet, melet som brukes til brød og tusenvis av andre faktorer. For oss personlig er ideen god hvis den er god for Booking.com. Hvis vi kan gjenta det på nettstedet vårt, og om det fungerer for alle våre kunder.

Vår mening

Du bør alltid teste ideene dine og se hva dataene forteller deg og hvilke spørsmål som dukker opp. Mitt råd? Ta en bit og se hva som skjer.

Enkel, funksjonell, intuitiv og minneverdig som noen veiskilt, hamburgerikonet ble en virkelig trend i fjor, og en integrert del av enhver moderne nettside og mobilapplikasjonsdesign.

Dette enkle ikonet simulerer utseende menyliste, ideell for enheter med små skjermer og nettsteder hvor den visuelle siden er viktig og navigasjon bør stå til side. Dette er en veldig effektiv og levedyktig løsning som oppfyller kravene i den moderne verden.

Som alle andre grensesnittelementer kan hamburgerikonet ha noen avvik fra original versjon, basert på behovene til hvert enkelt prosjekt.

Avhengig av prosjekt og tema, kan hamburgerikonet ta ulike former, som utfyller designet eller kan bli dets uavhengige, særegne trekk.

Dagens kolleksjon inkluderer 20 forskjellige varianter av hamburgerikonet.

Hamburgerikonet fra designeren Dave Games gir umiddelbart fra seg mye varm energi. Tegneseriestilen tilfører lekenhet og skaper bare de mest positive følelsene. Du kan trygt bruke et slikt ikon på de fleste moderne illustrerte grensesnitt.

Dette havbølgeikonet er designet av Mat Walker. Hun vil føle seg bra på ulike prosjekter dedikert til havet. Den lyseblå som hovedfarge og kanten rundt gjør dette merket eksklusivt.

En ren, lys og vittig implementering vil tillate dette designet å fungere som et menyikon på matlagingssider. I dette tilfellet vil grensesnittet få en hyggelig kunstnerisk vri.

Designeren tilbyr 10 interessante versjoner av hamburgerikoner, som er laget med sjel. Serieomslag forskjellige typer burgere: en med ost, en annen med bacon, en tredje med kalkun og mange andre. Hvis du har en nettside eller mobilapp dedikert til restauranten hurtigmat, da kommer de sikkert godt med. De er så visuelt interessante at de kan finne en plass i nesten alle temaer.

Og dette prosjektet representerer en realistisk hamburger i vektor. Lukkeknappen er laget i form av pommes frites, i form av en "X", med eller uten saus. Dette er en kreativ løsning som kan tilføre eksotisme til sidedesignet.

Offisiell side Stjerne krigen inkluderer et interessant hamburgerikon som roterer. Hver linje er delt i to deler for å oppnå refleksjonsvektoren til lasersverdenes lys. Beslutningen styrker generelt inntrykk fra siden og styrker merkevaren.

Burger Menu av Peter Twaury er en vakkert illustrert versjon av ikonet. Nøkkelfunksjon Dette ikonet består av å velge farger som imiterer en oppskåret bolle og en kjøttbolle.

Serien har ulike alternativer hamburgere, som er realisert ved hjelp av linjestil. Her finner du en dobbel hamburger, en hamburger med ost og salat, smørbrød og flere andre. Finne perfekt løsning for ditt ryddige, flate grensesnitt vil være enkelt å tilføre krydder og "smak".

Artisten demonstrerer tre morsomme versjoner av knappen: en klassisk hamburger, en cheeseburger og en pølse. Hver er basert på en eller to farger, noe som gjør den egnet for en rekke små grensesnitt. Her skaper fargen det rette utseendet til sandwichen.

Kunstneren foreslår liten animasjon, som inkluderer bare ett menyikon, og flere fades som følger med transformasjonen til en vanlig "X" (lukkeknapp). Det er spesialeffekter som oppstår når du holder musen eller klikker.

I motsetning til de fleste av eksemplene ovenfor, viser dette eksemplet dyktig manipulering av vekt i stedet for farge. Topp- og bunnlinjen er dristigere enn midten og skaper akkurat den rette "hamburger"-looken. Kunstneren fullførte oppgaven.

Menyanimasjon av ninjaikonet fra Andrew Kovardakov skiller seg fra de fleste hamburgerknapper, og tilbyr en interessant og ekstraordinær løsning, med en mystisk og attraktiv overtone. Her er hver linje en ninja i en vektor.

Og dette ikonet er en illustrasjon av en burger med salat og ost. Det kan gi litt glede til ethvert kjedelig grensesnitt. Perfekt løsning for en restaurant- eller kafénettside.

Dette er en artikkel hvor du kan finne interessante diskusjoner om det trendy menyikonet. Den er merket med et bilde som viser tre varianter av hamburgerknappen. Den første er en premium flat illustrasjon, den andre er et farget ikon med tre linjer, og den tredje er en monokromatisk versjon av det andre designet - det mest populære valget blant designere.

GIF viser myke overganger mellom den opprinnelige tilstanden til dette minimalistiske og elegante ikonet, og dets endelige tilstand. Siden animasjonen starter fra bunnlinjen, er den kortere enn de andre.

Liam Spradlins hamburgermeny ser ut som et sett med skolebokmerker. Denne implementeringen er dristig og noe grov. Dette ikonet er umiddelbart merkbart, men det kan være vanskelig å finne det rette miljøet for det.

Så langt har vi sett på ikoner separat, men de fungerer godt med ord, spesielt når ordet er "Meny". Selv om det kan virke som overkill, ser de sofistikerte ut sammen. De ultratynne 1px brede linjene som brukes i dette tilfellet passer sammen som puslespillbrikker.

Prosjektet beviser at et hamburgerikon kan se lysere og mer attraktivt ut når det er innrammet. Dette er et utmerket valg for små enheter, hvor et slikt ikon vil være praktisk for berøringsnavigering.

Designeren viser et enkelt, elegant ikon med tre linjer som gjennomgår ulike metamorfoser for å bli et kryss eller en pil. Animasjon inkluderer flere løsninger som kan være nyttige for ethvert prosjekt.

Resultater

Ved første øyekast kan det virke som om en så liten ting som et menyikon ikke er verdt å være særlig oppmerksom på. Men hvis du viser litt fantasi, kan du gjøre det om til et slags høydepunkt i grensesnittet ditt. Spesielt hvis utviklere begynner å leke med dens mening og bruk kunstneriske teknikker for å gjøre det mer ukonvensjonelt og iøynefallende.

Fra Vitaly Rubtsov kunne jeg ikke motstå ønsket om å realisere det.

I denne opplæringen skal jeg vise deg hvordan du gjør dette med bare CSS, uten noen bruker JavaScript. Så vi vil se noen CSS (og SCSS) triks som lar oss oppnå nesten det samme jevn animasjon, som denne animerte gif-en.

Her er et eksempel på hva vi skal gjøre:

Merking

La oss starte med HTML-strukturen vi skal bruke. Se kommentarer for bedre forståelse.

Starter SCSS-stiler

La oss nå legge til litt grunnleggende styling for å få det utseendet vi ønsker. Koden er ganske enkel.

/* Grunnleggende stiler*/ * ( box-sizing: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( tekst-dekorasjon: ingen; ) . container (posisjon: relativ; margin: 35px auto 0; bredde: 300px; høyde: 534px; bakgrunnsfarge: #533557; overløp: skjult; )

Bryterdrift

Før vi begynner å lage resten av grensesnittet, legger vi til noen vekslefunksjonalitet for enkelt å flytte fra en tilstand til en annen.

HTML-en vi trenger er der allerede. Og stilen som får det til å fungere er noe slikt:

// Skjul avmerkingsboksen #toggle ( vis: ingen; ) // Stiler for "åpen"-tilstanden når avkrysningsboksen er valgt #toggle:checked ( // Ethvert element hvis stil du må endre når du åpner menyen, vises her med en selector ~ // Åpningsstiler navigasjonsmenyen, for eksempel & ~ .nav ( ) )

Opprette en lukket tilstand

Å gjøre lukket tilstand, må vi konvertere menyelementene til linjer for å få et hamburgerikon. Det er flere måter å oppnå denne transformasjonen på. Vi bestemte oss for å gjøre det på denne måten:

Og her er koden som implementerer dette.

$transition-varighet: 0,5s; // Vis navigasjonselementer som linjer som utgjør hamburgerikonet.nav-item (posisjon: relativ; display: inline-block; float: left; clear: both; color: transparent; font-size: 14px; letter-space: - 6,2px; høyde: 7px; linjehøyde: 7px; tekst-transform: store bokstaver; mellomrom: nowrap; transform: scaleY(0.2); overgang: $transition-duration, opasitet 1s; // Legg til bredde for den første line & :nth-child(1) ( bokstavavstand: -8px; ) // Legge til bredde for den andre linjen &:nth-child(2) ( bokstavavstand: -7px; ) // Innstillinger for elementer som starter fra kl. det fjerde & :nth-child(n + 4) ( bokstavavstand: -8px; margin-top: -7px; opasitet: 0; ) // Få linjer for hamburgerikonet &:before ( posisjon: absolutt; innhold: ""; topp : 50%; venstre: 0; bredde: 100%; høyde: 2px; bakgrunnsfarge: #EC7263; transform: translateY(-50%) scaleY(5); overgang: $transition-duration; ) )

Vær oppmerksom på at her har vi bare inkludert de grunnleggende stilene for navigasjonselementene som er viktigst. Du finner hele koden på Github.

Lag en åpen meny

Å lage åpne menyen, må vi gjenopprette navigasjonselementene fra linjer til vanlige tekstlenker, og også gjøre en rekke mindre endringer. La oss se hvordan du gjør dette:

$transition-varighet: 0,5s; #toggle:checked ( // Åpne & ~ .nav ( // Gjenopprett navigasjonselementene fra "linjene" i menyen icon.nav-item ( farge: #EC7263; bokstavavstand: 0; høyde: 40px; linje- høyde: 40px ; margin-top: 0; opasitet: 1; transform: scaleY(1); overgang: $transition-duration, opasitet 0.1s; // Skjul linjene &:before ( opasitet: 0; ) ) ) )

Magi ligger i de små tingene

Ser vi nærmere på gif-en ser vi at alle menyelementene ikke flyttes samtidig, men i et sjakkbrettmønster. Vi kan også gjøre dette i CSS! I utgangspunktet må vi velge hvert element (ved å bruke :nth-child ) og angi overgangsforsinkelsesverdien til å øke gradvis. Dette er definitivt repeterende arbeid. Hva om vi har flere elementer? Ikke bekymre deg, vi kan gjøre alt bedre ved å bruke litt SCSS-magi:

$items: 4; $transition-delay: 0,05s; .nav-item ( // Angi forsinkelsen for navigasjonselementer når du lukker @for $i fra 1 til $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - delay; transition-delay: $delay; &:before ( overgangsforsinkelse: $delay; ) ) ) )

Merk at med denne koden vil vi få ønsket trinnoppførsel for den avsluttende animasjonen. Vi må beregne $delay , litt annerledes for åpningsanimasjonen, for å få trinnovergangen tilbake. Som dette:

$delay: ($items - $i) * $transition-delay;

Konklusjon

Vi er ferdige med vår fancy meny! Vi inkluderte også noen dummy-artikler som i animert gif og du kan se.

Så vi har laget en enkel og funksjonsmenyen bare i CSS. Men hvis du ikke vil bruke CSS-vekslesystemet, kan det erstattes perfekt med noen få JavaScript-strenger uten stor innsats.

Vi håper du likte denne opplæringen og fant den nyttig!