Hamburgerikon: nye måder at bruge det på. Hvorfor du bør undgå hamburgermenuer og hvordan du gør det

Du vil have sværere ved at give information til brugeren om et specifikt element, hvis det kun er synligt, når brugeren åbner menuen og leder efter et andet element.

Du kan gøre det som i Jawbone Up-applikationen: vis et ikon, der afspejler essensen af ​​meddelelsen ved siden af ​​knappen sidemenu.

Denne tilgang skalerer ikke særlig godt, fordi den involverer at skabe stor mængde specielle ikoner, og du vil som designer nogle gange skulle bruge standardikoner, der har mindre betydning.

Her er det modsatte eksempel: Twitters fanelinje, som viser brugeren konteksten for notifikationen og giver brugeren mulighed for at gå direkte til den relevante skærm.

Bevidsthed om problemet

Det kan se ud til, at du forpligtet gør alt dette for at spare mere skærmejendom, men vi misforstår ofte, hvad folk rent faktisk ser. Det kan virke for dig, at folk ser alt, hvad der er for øjnene af dem, men i virkeligheden har vi alle en vis koncentrationszone, selvom skærmstørrelsen er minimal ().

Derfor kan spørgsmålet om at spare skærmplads løses uden at gå på kompromis med navigationen — og iht. grundlæggende principper HCI (Human Computer Interaction), der kræver, at vi leverer feedback og visning af applikationsstatus.

Bemærk: Du skal muligvis friske op på din forståelse af HCI-principperne — Jeg er ret sikker på, at dette vil hjælpe dig med at undgå en masse designfejl, som folk med en visuel tilgang til design begår.

Løsning

Vi har talt meget om problemet, men løsningen er stadig ikke klar.

Hvornår kan du bruge hamburgermenuen?

I nogle meget sjældne tilfælde er dette mønster faktisk berettiget, men generelt bør det undgås.

IRCCloud er et eksempel på en berettiget (til en vis grad) brug af hamburgerknappen: den bruges til at navigere mellem kanaler og kanaldeltagere.

Dette er acceptabelt, fordi hovedskærmen ikke har nogen underordnede skærme, der kræver hierarkisk navigation; alt indhold præsenteres i en modal form.

Men selv i dette tilfælde er det klart, at grænsefladen er overbelastet, og informationsarkitekturen kræver revision.

Sidemenuen med kanalmedlemmer (til højre) erstatter en handlingsknap, hvorunder alle handlinger relateret til kanalerne kan skjules. I stedet skulle designerne blande alt mulige handlinger(relateret til kanaler, netværk og konto) i én handlingsmenu:

Dette bringer os glat til næste afsnit af artiklen:

Hvordan udskifter man hamburgerknappen?

Sidemenumønsteret medfører dårligt informationsarkitektur: En hamburgerknap er et andet grænsefladeelement, der ikke viser nogen handlingssekvens — før folk bruger den.

"Løsningen er at opdatere informationsarkitekturen."

Billederne ovenfor er et eksempel på, hvordan du kan undgå sidemenuen. Farvede prikker hjælper dig med at spore, hvordan grænsefladeelementer er blevet omorganiseret.

Konklusioner:

1. Status vises på fanen Meddelelser
2. Interfaceelementer er altid synlige og tilgængelige
3. Ingen konflikt mellem navigationsbevægelser

Udover at løse hovedproblemerne kan vi få lidt lodret plads ved at skjule appens navigationslinje, når vi scroller ned (se Facebook for et eksempel, men dette bruges også i Safari). Fanelinjen forbliver på plads, så vi kan navigere, selv når appens navigationslinje er skjult.

Hvis du er i et minimalistisk humør, vil en værktøjslinje måske være tilstrækkelig. Pointen er at gøre navigationen synlig, give direkte adgang til funktioner, undgå konflikter mellem navigationsbevægelser og vise advarsler på de ikoner, de tilhører.

[Opdatering] I tilfælde af websteder, bør du også genoverveje informationsarkitekturen, men i stedet for at bruge disse iOS-mønstre, anbefaler jeg at vise navigationen øverst, i en liste: eksempel. Hvis det er indlysende, at dette er webstedets navigation, vil folk helt sikkert rulle videre og straks se alle de andre tilgængelige muligheder.

Også at komme tilbage til emnet for hjemmesider på mobile enheder ah: glem ikke at fjerne trykforsinkelsen på 300 ms ved hjælp af disse tips eller ved hjælp af berøringshændelser.

Hvordan skalerer det hele?

Her giver jeg eksempler på iOS-grænseflader — den bedste løsning på dem er brugen af ​​et panel med faner eller værktøjer.

Men hvad hvis din fanelinje har mere end 5 elementer?

I sådanne situationer er den første ting, du skal gøre, at genoverveje applikationens informationsarkitektur. Men hvis du stadig skal gå ud over de fem faner, bruges følgende metode normalt: sidste faneblad giver adgang til en liste over resterende muligheder.

Denne implementering står over for et andet problem: efter rulning forbliver værktøjslinjen i en udefineret tilstand. Rookie skjuler panelet, efter at brugeren har valgt en af ​​handlingerne — beskær, roter osv. Dermed, ubestemt tilstand panelet "nulstilles", og når det genåbnes, vises det i sin oprindelige tilstand.

Konklusion

Så du har læst en artikel om problemerne med sidebar-mønsteret og deres løsning i iOS, som var indbygget i systemet helt fra begyndelsen.

Jeg håber, at artiklen var nyttig og forståelig for dig. Hvis du har kommentarer, så skriv til mig

Du er sikkert allerede træt af at læse artikler og konstant lytte til forskellige diskussioner om tre korte linjer hamburger menu. Er dette en dårlig UI-designteknik? Eller ikke dårligt? Dette indlæg er anderledes - det vil ikke bedømme, om denne menu er god eller dårlig. Pointen er, at jeg ikke synes, det er den bedste designbeslutning, på den ene eller anden måde. Men hamburgermenuen har også sin egen styrker, især når det bruges i mobilt design, under forhold med begrænset plads. Så hvad kan vi gøre? Bare acceptere hamburgermenuen, som den er, trods alle manglerne, og komme videre med dit liv? Mange websteder og apps ser ud til at være kommet overens med dette. Og jeg tror på, at jeg er i stand til det bedste.

Og så skete der to ting, som fik mig til at ændre mening. Først stødte jeg på. Dette er en artikel, der virkelig hjælper med at forstå konsekvenserne af at bruge en hamburgermenu. Især websteder med sådanne menuer lider under et alvorligt fald i brugerengagement. En gennemgang af sådanne statistikker begyndte bare at ændre min mening.

Den næste hændelse skete, da jeg observerede en kollega, der forsøgte at bruge en ny webapplikation, der havde netop sådan en menu. Dette var en udvikler, der var meget fortrolig med hamburgermenugrænsefladen, men da det kom til at bruge applikationen til hans behov, spurgte han højlydt: "Hvordan kommer jeg dertil?" Bemærk venligst, at dette er en af ​​de de klogeste mennesker, det ved jeg, og han tænkte ikke engang på at røre ved hamburgermenuikonet. Hvis nogen så smart har problemer med at navigere, hvad siger det så om den typiske bruger? Min mening har endelig fået et solidt grundlag.

At finde en løsning

Det er nok om årsagerne til min vantro til hamburgermenuens kraft – det er tid til at tale om løsningen. Først undersøgte jeg de specifikke fordele ved at bruge en hamburgermenu:

• Skalerbarhed: dette er nok det vigtigste plus og hovedårsagen, hvorfor så mange websteder og applikationer vælger det. Du kan passe en masse navigationselementer bag et lille ikon.
• Nøjagtighed: dette går hånd i hånd med skalerbarhed, men stadig ikke det samme. Designere ønsker at skabe kortfattede og pæne designs, der giver plads nok til hovedindholdet. Brug af en hamburgermenu giver en følelse af visuel enkelhed, som er attraktiv for enhver designer.

Og hvis vi skal skabe et alternativ til hamburgermenuen, skal det på en eller anden måde løse problemerne forbundet med det:

• Forståelighed: Navigationselementer bør let kunne findes, især af dem, der bruger produktet for første gang.
• Engagement: Grænsefladen skal give tip og feedback, der forklarer, hvad brugeren kan gøre med produktet, og hvornår det er passende at bruge visse funktioner.

Den vanskelige del: mobil

Jeg besluttede at starte med det meste komplekst problem og tjek om min løsning er egnet til mobile designs. Efter at have overvejet et væld af ideer, kom jeg til den konklusion, at iOS-fanemenuen er en af ​​de bedste løsninger til mobile grænseflader. Mange mennesker har forsøgt at gøre fanelinjen rullebar (så den passer til mere end fem muligheder) eller tilføje "mere" til navigationen - noget som Plyushkin, der har et ekstra rum, der hurtigt vil fyldes med skrammel. Desuden opfylder begge disse muligheder stadig ikke hovedkravet - klarhed, synlighed af alle muligheder mangler. Så hvad kan du gøre med fanemenuen for at løse dette?

Min løsning er at kombinere hamburgeren og fanebaren i en enkelt tilgang. Resultatet er en fanelinje, der åbner et sæt indstillinger for hvert menupunkt.

jeg skabte test applikation at evaluere teamets produktivitet for at illustrere din tilgang i aktion. Ved hjælp af denne metode kan brugeren tydeligt se de vigtigste funktioner og anvendelser af produktet. Og i stedet for at falde i søvn fuld liste menupunkter gemt bag hamburgerikonet, får brugeren vist flere muligheder, der relaterer sig til den fane, han klikkede på. Dette gør navigationen nemmere at forstå og fordøje, alt hvad du har brug for er altid lige ved hånden, og giver brugeren mulighed for at se hierarkiet i applikationen.

En anden fordel ved dette design er muligheden for at bruge kontekstuelle meddelelser. I tilfælde af en hamburgermenu har du kun ét sted at vise disse meddelelser. Hvis du holder dig til et fanelinjelayout, kan du give tip til brugeren om et hvilket som helst af de menupunkter, de vælger.

Selvfølgelig er den største gevinst ved denne tilgang skalerbarhed. Ja, du er stadig begrænset til fem kategorier, men det er en god ting. Helt ærligt, jeg tror, ​​at ethvert websted kan indpasse sine muligheder i fem kategorier, hvis designeren tænker gennem navigationen klogt. I hver af disse kategorier kan der trods alt være fem eller seks underpunkter mere.
I alt er der 30 mulige navigationsmuligheder uden følelsen af ​​overbelastning for brugeren og uden at optage hele skærmpladsen.

Anvendelse til tablets

At integrere sådan en fanebjælke i tablets, da det virkede mærkeligt. Tabletter er meget mere alsidige, og at bruge den samme brugergrænseflade som mobile enheder så lige så akavet ud som en teenager i tøj, som han for længst var vokset fra. Så jeg gik en anden vej. I stedet for at placere fanestangen i bunden, placerede jeg den på siden. Dette viste sig at være mere praktisk med hensyn til at bruge skærmplads og så meget naturligt ud. Derudover holder mange brugere tabletten ved siden, så dette er målområdet for fingerberøring.

Hvad med desktop?

Gør dig klar...udtræksmenu. Det er rigtigt - prøv denne tilgang på en desktop-grænseflade, og du vil blive konfronteret med en ubestridelig realitet: denne mulighed er slet ikke ny. Glidende menuer har eksisteret i årevis, og næsten alle (selv din mor) ved, hvordan det fungerer. Det er det smukke ved denne tilgang - det er ikke noget nyt.

Fuld åbenhed

Jeg ved ikke, hvad jeg skal kalde det her. Indlægsskyder? Eller TABurger (TAB “tab” + burger)? Desuden ved jeg ikke, om nogen har lavet en lignende løsning før. I betragtning af hvor enkel sådan en menu er, kan jeg ikke holde ud at tro, at jeg var den første. Jeg ved, at nogle få apps bruger udtræksmenuer på nogle faneknapper (som Tweetbot), men de er normalt implementeret sådan her hurtig adgang til funktioner for avancerede brugere, og ikke med det formål at øge navigationshierarkiet. Hvis du har et sådant eksempel, så lad mig det vide i kommentarerne.
Det er lige meget, om en sådan menu er ny eller længe er blevet opfundet. Det afgørende er, om det er en bedre, mere kreativ navigationsløsning end en hamburgermenu. Stop med at fortælle dig selv "Dette seje websted har denne menu, så det må være det bedste" eller "Alle gør det, så det skal være rigtigt." Design fortjener en bedre og mere gennemtænkt tilgang.
OPDATERINGER
Collin Eberhardt bemærkede på Twitter, at den samme brugergrænseflade er implementeret i Windows telefon. jeg migselv Windows bruger Ring, og han har ret. Selvom denne type interaktion kun bruges i Windows Phone til indstillingen "mere" i fanelinjen.

James Perich gav et andet eksempel på Twitter. Tag et kig på AHTabBarController skabt af Arthur Hemmer.

Hamburgerikonet er overalt. Overalt omkring os. I webapplikationer, på mobil- og computerwebsteder, i software. Dette allestedsnærværende ikon med tre linjer er så almindeligt i disse dage, at det ser ud som om det er unikt forbundet med navigationsmenuen. Men er det?

I På det sidste diskussioner om effektiviteten af ​​hamburgerikonet har nået nye højder. Artikler af prominente designere og adskillige websteder, herunder The Atlantic, TechCrunch, The Next Web og Nielsen Norman Group, konkluderer, at dette er et UX-anti-mønster, et trendy og let-at-implementere ikon, der er en regression fra enklere, mere udtryksfulde alternativer. . Men anti-mønster eller ej, brugen af ​​ikonet er vokset så meget, at det nærmest er fast inventar på de fleste hjemmesider, især på små skærme.

I betragtning af min position som designer på m.booking.com-teamet og vores brug af dette ikon til at vise en udtræksmenu, besluttede jeg at udforske dette objekt. Jeg begyndte med at studere ikonets oprindelse for at prøve at forstå dets vej til skændsel.

Det lyder lovende. Men selvom ikonet er en klassiker og har eksisteret for evigt, har webdesignere været mindre konsekvente i brugen af ​​det. Ikonet er blevet brugt til lister, træk og omarrangering, justering og mere. Måske forklarer dette misbrug sin kritik som et menuikon. Måske på grund af den brede udbredelse og forskellige anvendelser dette ikon har mistet sin evne til at formidle en samlet metafor og efterlader til gengæld brugerne forvirrede.

Hele denne historie fik mig til at stille spørgsmål: "Tager vi virkelig forkert, og alle andre har ret? Medfører dette gener for vores brugere? Er der folk, der rent faktisk forstår, hvad de tre små linjer på vores hjemmeside er?"

Regelmæssige læsere af denne blog vil ikke blive overrasket over at høre, at vores næste skridt var at stille disse spørgsmål i form af en A/B-test. Som alt andet var hamburgerikonet underlagt indflydelse fra vores mange kunder, der gennem interaktion med menuen skulle afgøre, om ikonet var den bedste løsning. På dette tidspunkt havde jeg læst nok artikler og information til at være sikker på, at manglen på konsensus eller forskellige resultater ikke skyldtes adfærden hos de kunder, for hvem designet blev udviklet. Jeg besluttede at følge den beskrevne metode James Foster, refereret af mange, inklusive en af ​​vores bedste mobilspecialister — Luke Wroblewski.

Vi har tidligere testet flere ikonplaceringer og stilarter (med kant, uden kant, med ikon, forskellige farver osv.), men vi har aldrig testet ordet "Menu" på grund af kompleksiteten af ​​vores ønske om at teste i fyrre- ét sprog, understøttet af os. Men vi gik videre, fandt oversættelserne med hjælp fra vores team af sprogeksperter og kørte testen:

Vores originale "hamburger" menuikon er til venstre for titlen og med en hvid skillelinje til højre.

Ordet "Menu" inde i en blok med en hvid ramme med afrundede hjørner, er også venstrejusteret.

Vi lancerede et eksperiment på tværs af hele vores brugerbase. Og også i betragtning af dette elements popularitet og allestedsnærværende brugergrænseflade, håbede, at det ikke ville tage lang tid at teste millioner af vores kunder rundt om i verden på alle understøttede sprog og stort antal enheder.

Så hvad er slutresultatet? Besejrede ordet fastfood, som det gjorde i James Fosters eksperiment, eller vil bollen og koteletten vinde?

resultater

I dette eksperiment havde udskiftning af ikonet med ordet "Menu" ikke nogen væsentlig indflydelse på vores brugeres adfærd. Ved hjælp af vores enorme brugerbase kan vi, meget høj grad Det er sandsynligt, at hamburgerikonet især for Booking.com-besøgende udfører sin rolle på samme måde som versionen med en tekstbeskrivelse.

Selvfølgelig kan vi ikke ekstrapolere disse data til alt. I nogle lande, på nogle sprog eller enheder, kan det have fungeret bedre eller værre. Men på globalt plan kan vi konkludere, at "hamburgeren" er blevet latterliggjort for meget. Samlet set var det lige så genkendeligt som ordet "Menu." I ånden med at styre designfremskridt bør vi nok overveje andre muligheder og måske prøve at tilføje ost, et stykke bacon og pommes frites til vores hamburgerikon, men indtil videre er vi glade for at kunne rapportere, at vores "tre-linjers ven" er pudset over det hele. Dens faktiske placering, form, størrelse, position og farve er naturligvis et emne for fremtidig test.

Dette er helt sikkert en lektion for os alle om karakteren af ​​A/B-test. Du tester aldrig UI-elementerne, modellen eller funktionen som helhed. Du tester disse ting på en meget specifik brugergruppe under specifikke og specifikke scenarier. Det, der virker for Booking.com, virker muligvis ikke for dig eller dine brugere. Dette er en af ​​grundene til, at vi lavede vores A/B-test. Resultater fra andre eksperter, data fra andre websteder eller hypoteser opstillet på en pub, mens du spiser en burger, vil alle være ubeviste, indtil de er testet med vores kunder og på vores platform.

Ikke for at fare vild i vores egen metafor, men det er ligesom en opskrift på en god hamburger. Selvom du skrev alle ingredienserne ned præcis efter mig, ender du med en helt anden hamburger. Dette vil naturligvis blive påvirket af kvaliteten af ​​det kød, der er tilgængeligt på markedet, det mel, der bruges til brød og tusindvis af andre faktorer. For os personligt er ideen god, hvis den er god for Booking.com. Hvis vi kan gentage det på vores hjemmeside, og om det virker for alle vores kunder.

Vores mening

Du bør altid teste dine ideer og se, hvad dataene fortæller dig, og hvilke spørgsmål der opstår. Mit råd? Tag en bid og se, hvad der sker.

Enkel, funktionel, intuitiv og mindeværdig som enhver vejskilt, hamburgerikonet blev en reel trend sidste år, og et integreret element i enhver moderne hjemmeside og mobilapplikationsdesign.

Dette enkle ikon simulerer udseende menuliste, ideel til enheder med små skærme og hjemmesider, hvor den visuelle side er vigtig og navigation skal stå til side. Dette er en meget effektiv og levedygtig løsning, der opfylder kravene i den moderne verden.

Som ethvert andet grænsefladeelement kan hamburgerikonet have nogle afvigelser fra original version, baseret på det enkelte projekts behov.

Afhængigt af projekt og tema kan hamburgerikonet tage forskellige former, som komplementerer designet eller kan blive dets selvstændige, karakteristiske træk.

Dagens kollektion omfatter 20 forskellige variationer af hamburgerikonet.

Hamburgerikonet fra designeren Dave Games afgiver straks en masse varm energi. Tegneseriestilen tilføjer leg og skaber kun de mest positive følelser. Du kan trygt bruge et sådant ikon på de fleste moderne illustrerede grænseflader.

Dette havbølgeikon er designet af Mat Walker. Hun vil føle sig fantastisk på forskellige projekter dedikeret til havet. Den lyseblå som hovedfarve og kanten omkring det gør dette badge eksklusivt.

En ren, lys og vittig implementering vil tillade dette design at fungere som et menuikon på madlavningssider. I dette tilfælde vil grænsefladen modtage et behageligt kunstnerisk twist.

Designeren tilbyder 10 interessante versioner af hamburgerikoner, som er lavet med sjæl. Serieomslag forskellige slags burgere: en med ost, en anden med bacon, en tredje med kalkun og mange andre. Hvis du har en hjemmeside eller mobil app dedikeret til restauranten fastfood, så vil de helt sikkert komme til nytte. De er så visuelt interessante, at de kan finde en plads i næsten ethvert tema.

Og dette projekt repræsenterer en realistisk hamburger i vektor. Lukkeknappen er lavet i form af pommes frites, i form af et "X", med eller uden sauce. Dette er en kreativ løsning, der kan tilføje eksotisme til sidedesignet.

Officiel side Star wars indeholder et interessant hamburgerikon, der roterer. Hver linje er opdelt i to dele for at opnå reflektionsvektoren for lasersværdens lys. Beslutningen styrker generelt indtryk fra siden og styrker brandet.

Burger Menu af Peter Twaury er en smukt illustreret version af ikonet. Nøglefunktion Dette ikon består af at vælge farver, der efterligner en udskåret bolle og en kødbøf.

Serien har forskellige muligheder hamburgere, som er realiseret ved hjælp af linjestil. Her finder du en dobbelt hamburger, en hamburger med ost og salat, smørrebrød og flere andre. Find perfekt løsning for din pæne, flade grænseflade vil være enkel at tilføje krydderi og "smag".

Kunstneren demonstrerer tre sjove versioner af knappen: en klassisk hamburger, en cheeseburger og en hotdog. Hver er baseret på en eller to farver, hvilket gør den velegnet til en række små grænseflader. Her skaber farven det rigtige look til sandwichen.

Kunstneren foreslår lille animation, som kun indeholder et menuikon og flere fades, der ledsager transformationen til et almindeligt "X" (luk-knap). Der er specielle effekter, der opstår, når du holder musen eller klikker.

I modsætning til de fleste af eksemplerne ovenfor viser dette eksempel dygtig manipulation af vægt frem for farve. Den øverste og nederste linje er dristigere end midten og skaber det helt rigtige "hamburger"-look. Kunstneren fuldførte opgaven med succes.

Menuanimation af ninja-ikonet fra Andrew Kovardakov adskiller sig fra de fleste hamburgerknapper og tilbyder en interessant og ekstraordinær løsning med en mystisk og attraktiv overtone. Her er hver linje en ninja i en vektor.

Og dette ikon er en illustration af en burger med salat og ost. Det kan tilføje noget gejst til enhver kedelig grænseflade. Perfekt løsning til en restaurant eller cafe hjemmeside.

Dette er en artikel, hvor du kan finde interessante diskussioner om det trendy menuikon. Den er markeret med et billede, der viser tre variationer af hamburgerknappen. Den første er en premium flad illustration, den anden er et farvet ikon med tre linjer, og den tredje er en monokromatisk version af det andet design - det mest populære valg blandt designere.

GIF viser jævne overgange mellem den oprindelige tilstand af dette minimalistiske og elegante ikon og dets endelige tilstand. Da animationen starter fra bundlinjen, er den kortere end de andre.

Liam Spradlins hamburgermenu ligner et sæt skolebogmærker. Denne implementering er fed og noget rå. Dette ikon er umiddelbart mærkbart, dog kan det være svært at finde det rigtige miljø til det.

Indtil videre har vi set på ikoner separat, men de fungerer godt sammen med ord, især når ordet er "Menu". Selvom det kan virke som overkill, ser de sofistikerede ud sammen. De ultratynde 1px brede linjer, der bruges i dette tilfælde, passer sammen som puslespilsbrikker.

Projektet beviser, at et hamburgerikon kan se lysere og mere attraktivt ud, når det er indrammet. Dette er et glimrende valg til små enheder, hvor et sådant ikon vil være praktisk til touch-navigation.

Designeren viser et enkelt, elegant ikon med tre linjer, der gennemgår forskellige metamorfoser for at blive til et kryds eller en pil. Animation omfatter flere løsninger, der kan være nyttige til ethvert projekt.

Resultater

Ved første øjekast kan det se ud til, at en så lille ting som et menuikon ikke er værd at være særlig opmærksom på. Men hvis du viser lidt fantasi, kan du gøre det til en slags højdepunkt i din grænseflade. Især hvis udviklere begynder at lege med dets betydning og brug kunstneriske teknikker for at gøre det mere utraditionelt og iøjnefaldende.

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

I denne tutorial vil jeg vise dig, hvordan du gør dette ved at bruge CSS, uden nogen ved hjælp af JavaScript. Så vi vil se nogle CSS (og SCSS) tricks, der vil tillade os at opnå næsten det samme jævn animation, som denne animerede gif.

Her er et eksempel på, hvad vi vil gøre:

Mærkning

Lad os starte med den HTML-struktur, vi skal bruge. Se kommentarer for bedre forståelse.

Starter SCSS Styles

Lad os nu tilføje noget grundlæggende styling for at få det look, vi ønsker. Koden er ret simpel.

/* Grundlæggende stilarter*/ * ( box-sizing: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( tekst-dekoration: ingen; ) . container (position: relativ; margen: 35px auto 0; bredde: 300px; højde: 534px; baggrundsfarve: #533557; overløb: skjult; )

Skift betjening

Før vi begynder at oprette resten af ​​grænsefladen, tilføjer vi nogle skiftefunktioner for nemt at flytte fra en tilstand til en anden.

Den HTML, vi har brug for, er der allerede. Og stilen, der får det til at fungere, er sådan her:

// Skjul afkrydsningsfeltet #toggle ( vis: ingen; ) // Styles for "åben" tilstand, når afkrydsningsfeltet er markeret #toggle:checked ( // Ethvert element, hvis stil du skal ændre, når du åbner menuen, kommer her med en selector ~ // Åbningsstile navigationsmenu, for eksempel & ~ .nav ( ) )

Oprettelse af en lukket tilstand

At gøre lukket tilstand, skal vi konvertere menupunkterne til linjer for at få et hamburgerikon. Der er flere måder at opnå denne transformation på. Vi besluttede at gøre det på denne måde:

Og her er koden, der implementerer dette.

$transition-varighed: 0,5s; // Vis navigationselementer som linjer, der udgør hamburgerikonet.nav-item (position: relativ; display: inline-blok; float: venstre; clear: begge; farve: gennemsigtig; skriftstørrelse: 14px; bogstavmellemrum: - 6,2px; højde: 7px; linjehøjde: 7px; tekst-transform: store bogstaver; mellemrum: nowrap; transformation: scaleY(0.2); overgang: $transition-duration, opacitet 1s; // Tilføj bredde for den første line & :nth-child(1) ( bogstavmellemrum: -8px; ) // Tilføjelse af bredde for anden linje &:nth-child(2) ( bogstavmellemrum: -7px; ) // Indstillinger for elementer fra kl. det fjerde & :nth-child(n + 4) ( bogstavmellemrum: -8px; margin-top: -7px; opacitet: 0; ) // Hent linjer for hamburgerikonet &:before ( position: absolut; indhold: ""; top: 50%; venstre: 0; bredde: 100%; højde: 2px; baggrundsfarve: #EC7263; transform: translateY(-50%) scaleY(5); transition: $transition-duration; ) )

Bemærk venligst, at vi her kun har inkluderet de grundlæggende stilarter for de navigationselementer, der er vigtigst. Du kan finde den komplette kode på Github.

Opret en åben menu

At skabe åben menu, skal vi gendanne navigationselementerne fra linjer til almindelige tekstlinks og også foretage en række mindre ændringer. Lad os se, hvordan du gør dette:

$transition-varighed: 0,5s; #toggle:checked ( // Åbn & ~ .nav ( // Gendan navigationselementerne fra "linjerne" i menuen icon.nav-item ( farve: #EC7263; bogstavmellemrum: 0; højde: 40px; linje- højde: 40px; margin-top: 0; opacitet: 1; transformation: scaleY(1); overgang: $transition-duration, opacitet 0.1s; // Skjul linjerne &:before ( opacitet: 0; ) ) ) )

Magi er i de små ting

Kigger vi nærmere på gif'en, ser vi, at alle menupunkterne ikke flyttes på samme tid, men i et skakternet mønster. Vi kan også gøre dette i CSS! Grundlæggende skal vi vælge hvert element (ved hjælp af :nth-child ) og indstille overgangsforsinkelsesværdien til gradvist at stige. Dette er bestemt gentaget arbejde. Hvad hvis vi har flere elementer? Bare rolig, vi kan gøre alting bedre ved at bruge lidt SCSS-magi:

$emner: 4; $transition-delay: 0,05s; .nav-item ( // Indstil forsinkelsen for navigationselementer ved lukning af @for $i fra 1 til $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - delay; transition-delay: $delay; &:before ( overgangsforsinkelse: $delay; ) ) ) )

Bemærk, at vi med denne kode får den ønskede trinadfærd for den afsluttende animation. Vi er nødt til at beregne $delay , lidt anderledes for åbningsanimationen, for at få trinovergangen tilbage. Sådan her:

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

Konklusion

Vi er færdige med vores smarte menu! Vi inkluderede også nogle dummy-genstande som i animeret gif og du kan se.

Så vi har lavet en enkel og funktionsmenu kun i CSS. Men hvis du ikke ønsker at bruge CSS-toggle-systemet, kan det udskiftes perfekt med nogle få JavaScript-strenge uden større indsats.

Vi håber, du nød denne tutorial og fandt den nyttig!