Meniul de hamburger este un meniu simplu. Pictograma Hamburger: noi moduri de utilizare. Aplicație pe tablete

Vitaly Rubtsov nu a rezistat dorinței de a realiza acest lucru.

În acest tutorial, vă voi arăta cum să faceți acest lucru folosind doar CSS, fără a utiliza JavaScript. Așa că vom vedea câteva trucuri CSS (și SCSS) care ne vor permite să realizăm animații aproape la fel de fluide ca acest gif animat.

Iată un exemplu de ceea ce vom face:

Marcare

Să începem cu structura HTML pe care o vom folosi. Vezi comentariile pentru o mai bună înțelegere.

Control Poveste Statistici Setări

Pornirea stilurilor SCSS

Acum să adăugăm un stil de bază pentru a obține aspectul pe care îl dorim. Codul este destul de simplu.

/* Stiluri de bază */ * ( dimensiunea casetei: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( text-decoration: niciunul; ) .container (poziție: relativă; margine: 35px auto 0; lățime: 300px; înălțime: 534px; culoare de fundal: #533557; overflow: ascuns; )

Funcționarea comutatorului

Înainte de a începe să creăm restul interfeței, vom adăuga câteva funcționalități de comutare pentru a trece cu ușurință de la o stare la alta.

HTML-ul de care avem nevoie este deja acolo. Și stilul care o face să funcționeze este cam așa:

// Ascunde caseta de selectare #toggle ( display: none; ) // Stiluri pentru starea „deschisă” atunci când caseta de selectare este selectată #toggle:checked ( // Orice element al cărui stil trebuie să-l schimbați la deschiderea meniului merge aici cu un selector ~ // Stiluri pentru deschiderea unui meniu de navigare, de exemplu & ~ .nav ( ) )

Crearea unei stări închise

Pentru a face starea închisă, trebuie să convertim elementele de meniu în linii pentru a obține o pictogramă hamburger. Există mai multe modalități de a realiza această transformare. Am decis să procedăm astfel:

Și aici este codul care implementează acest lucru.

$tranzitie-durata: 0.5s; // Afișează elementele de navigare ca linii care alcătuiesc pictograma hamburger.nav-item (poziție: relativă; afișare: bloc inline; float: stânga; clar: ambele; culoare: transparent; dimensiunea fontului: 14px; spațiere între litere: - 6.2px; înălțime de linie: 7px; lățime pentru a doua linie &:nth-child(2) ( spațiere între litere: -7px; ) // Setări pentru elemente care încep de la a patra & :nth-child(n + 4) ( spațiere între litere: -8px; margine -top: -7px; opacitate: 0; : translateY(5): $tranzitie-durata;

Vă rugăm să rețineți că aici am inclus doar stilurile de bază pentru elementele de navigare care sunt cele mai importante. Puteți găsi codul complet pe Github.

Creați un meniu deschis

Pentru a crea un meniu deschis, trebuie să restabilim elementele de navigare de la linii la legături de text obișnuite, precum și să facem o serie de modificări minore. Să vedem cum să facem asta:

$tranzitie-durata: 0.5s; #toggle:bifat ( // Deschide & ~ .nav ( // Restaurează elementele de navigare din „linii” din meniu pictograma.nav-item (culoare: #EC7263; spațiere între litere: 0; înălțime: 40px; line-) înălțime: 40px;

Magia este în lucrurile mărunte

Dacă ne uităm mai atent la gif, vedem că toate elementele de meniu nu sunt mutate în același timp, ci într-un model de șah. Putem face acest lucru și în CSS! Practic, trebuie să selectăm fiecare element (folosind :nth-child ) și să setăm valoarea întârzierii tranziției să crească treptat. Aceasta este cu siguranță o muncă repetitivă. Dacă avem mai multe elemente? Nu vă faceți griji, putem face totul mai bine folosind puțină magie SCSS:

$articole: 4; $tranziție-întârziere: 0.05s; .nav-item ( // Setați întârzierea pentru elementele de navigare la închiderea @for $i de la 1 la $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - întârziere-tranziție: $întârziere;

Rețineți că cu acest cod vom obține comportamentul pas dorit pentru animația de închidere. Trebuie să calculăm $delay , ușor diferit pentru animația de deschidere, pentru a recupera tranziția pasului. Ca aceasta:

$întârziere: ($articole - $i) * $întârziere-tranziție;

Concluzie

Am terminat cu meniul nostru chic! Am inclus, de asemenea, câteva elemente false ca în gif-ul animat și puteți vedea.

Deci, am creat un meniu simplu și funcțional folosind doar CSS. Cu toate acestea, dacă nu doriți să utilizați sistemul de comutare CSS, acesta poate fi înlocuit perfect cu câteva linii de JavaScript fără prea mult efort.

Sperăm că ți-a plăcut acest tutorial și l-ai găsit util!

Salutare tuturor. Corvax este cu tine. Astăzi vreau să continui subiectul meniurilor mobile și te invit să o faci, dar doar folosind jQuery. Merge.

Crearea unui aspect de meniu HTML Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis autem consequatur eum facere neque. Tenetur laboriosam repellendus neque fuga, velit, totam, est, aspernatur sunt sapiente earum quo beatae. Fuga, officia. Adăugarea stilurilor de bază CSS nav( fundal: #3e2597; padding: 0; margin: 0; ) .menu( list-style-type: none; padding: 0; margin: 0; ) .menu li( float: left; ) . meniu li a( afișare: bloc inline; umplutură: 10px 15px; culoare: #fff; decor text: niciuna; ) .wrapper( lățime maximă: 1024px; umplutură: 10px; margine: 0px automat; ) .menuToggle( culoare : #fff; padding: 10px 15px; cursor: display: none; : absolută; lățime: 100%-left: 10px ) .menu li( float: none; ) )

După ce am creat meniul în sine, trebuie să conectăm fișierul JS și să trecem la partea cea mai interesantă.

$(function())( $(".menuToggle").on("clic", function() ( $(".meniu").slideToggle(300, function())( if($(this).css (" display") === "none")( $(this).removeAttr("style"); ) ) ));

Să aruncăm o privire mai atentă la ceea ce este scris aici. La început, închidem sobit.on făcând clic pe butonul „Meniu”. În cadrul acestui eveniment, adăugăm o funcție slideToggle() la meniul drop-down $(“.menu”), care va deschide și închide fără probleme meniul drop-down.

Există o mică problemă pe care o vom avea atunci când comutăm versiunile site-ului și facem clic pe butonul „Meniu”, și anume blocul cu elementele de meniu în sine va fi ascuns deoarece În mod implicit, funcția slideToggle() adaugă atributul „display: none” la închidere. Pentru a remedia această eroare, trebuie să apelați un callback (o funcție care va fi apelată după ce funcția principală este procesată) pentru funcția slideToggle(). În interiorul callback-ului scriem o condiție. Dacă avem un atribut în blocul de meniu egal cu „display: none” atunci eliminăm atributul „style”.

Concluzie

Așadar, foarte simplu și rapid, am creat un meniu adaptiv „hamburger” pe care îl puteți utiliza cu ușurință în proiectele dumneavoastră. puteți descărca sursele. Corvax a fost cu tine. Da, noi întâlniri!

Probabil te-ai săturat deja să citești articole și să asculți constant diverse discuții despre trei rânduri scurte din meniul de hamburger. Este aceasta o tehnică proastă de proiectare a interfeței de utilizare? Sau nu rău? Această postare este diferită - nu va judeca dacă acest meniu este bun sau rău. Ideea este că nu cred că este cea mai bună decizie de design, într-un fel sau altul. Meniul de hamburger are insa si punctele sale forte, mai ales atunci cand este folosit in designul mobil, in conditii de spatiu limitat. Deci ce putem face? Doar să accepți meniul de hamburger așa cum este, în ciuda tuturor neajunsurilor și să mergi mai departe cu viața ta? O mulțime de site-uri și aplicații par să fi acceptat acest lucru. Și cred că sunt capabil de ce e mai bun.

Și apoi s-au întâmplat două lucruri care m-au făcut să mă răzgândesc. În primul rând, am dat peste. Acesta este un articol care vă ajută cu adevărat să înțelegeți implicațiile utilizării unui meniu de hamburger. În special, site-urile cu astfel de meniuri suferă o scădere serioasă a implicării utilizatorilor. O revizuire a unor astfel de statistici tocmai a început să-mi schimbe părerea.

Următorul incident s-a întâmplat când vedeam un coleg care încerca să folosească o nouă aplicație web care avea doar un astfel de meniu. Acesta a fost un dezvoltator care era foarte familiarizat cu interfața meniului hamburger, dar când a venit să folosească aplicația pentru nevoile sale, a întrebat cu voce tare: „Cum ajung acolo?” Rețineți, acesta este unul dintre cei mai deștepți oameni pe care îi cunosc și nici nu s-a gândit să atingă pictograma meniului de hamburger. Dacă cineva atât de inteligent are probleme cu navigarea, ce spune asta despre utilizatorul obișnuit? Părerea mea a căpătat în sfârșit o bază solidă.

Găsirea unei soluții

Este suficient despre motivele neîncrederii mele în puterea meniului de hamburger - este timpul să vorbim despre soluție. În primul rând, m-am uitat la beneficiile specifice ale utilizării unui meniu de hamburger:

Scalabilitate: acesta este probabil principalul plus și principalul motiv pentru care atât de multe site-uri și aplicații îl aleg. Puteți încadra o mulțime de elemente de navigare în spatele unei pictograme mici.
Acuratețe: aceasta merge mână în mână cu scalabilitatea, dar tot nu este același lucru. Designerii doresc să creeze modele concise și îngrijite, lăsând suficient spațiu pentru conținutul principal. Utilizarea unui meniu de hamburger oferă un sentiment de simplitate vizuală care este atractiv pentru orice designer.

Și dacă e să creăm o alternativă la meniul de hamburger, aceasta trebuie să rezolve cumva problemele asociate cu acesta:

Înțeles: Elementele de navigare ar trebui să poată fi găsite cu ușurință, în special de către cei care folosesc produsul pentru prima dată.
Implicare: interfața ar trebui să ofere sugestii și feedback care să explice ce poate face utilizatorul cu produsul și când este adecvat să utilizeze anumite funcții.

Partea dificilă: mobil

Am decis să încep cu cea mai dificilă problemă și să văd dacă soluția mea ar funcționa pentru modelele mobile. După ce m-am gândit la o mulțime de idei, am ajuns la concluzia că meniul barei de file iOS este una dintre cele mai bune soluții pentru interfețele mobile. Mulți oameni au încercat să facă bara de file derulabilă (pentru a se potrivi cu mai mult de cinci opțiuni) sau să adauge „mai multe” la navigare - ceva de genul Plyushkin, care are o cameră suplimentară care se va umple rapid cu vechituri. De asemenea, ambele opțiuni încă nu îndeplinesc cerința principală - lipsește claritatea, vizibilitatea tuturor posibilităților. Deci, ce puteți face cu meniul file pentru a remedia acest lucru?

Soluția mea este să combin hamburgerul și bara de file într-o singură abordare. Rezultatul este o bară de file care deschide un set de opțiuni pentru fiecare element de meniu.

Am creat o aplicație de testare a productivității echipei pentru a ilustra abordarea mea în acțiune. Folosind această metodă, utilizatorul poate vedea clar principalele funcții și utilizări ale produsului. Și, în loc să fie bombardat cu o listă completă de elemente de meniu ascunse în spatele unei pictograme de hamburger, utilizatorului i se arată mai multe opțiuni care se referă la fila pe care a făcut clic. Acest lucru face navigarea mai ușor de înțeles și digerat, tot ceea ce aveți nevoie este întotdeauna la îndemână și permite utilizatorului să vadă ierarhia aplicației.

Un alt avantaj al acestui design este capacitatea de a utiliza notificări contextuale. În cazul unui meniu de hamburger, aveți un singur loc pentru a afișa aceste notificări. Dacă rămâneți cu un aspect al barei de file, puteți oferi indicii utilizatorului cu privire la oricare dintre elementele de meniu pe care le selectează.

Desigur, cel mai mare câștig al acestei abordări este scalabilitatea. Da, încă ești limitat la cinci categorii, dar asta e un lucru bun. Sincer, cred că orice site își poate încadra opțiunile în cinci categorii dacă designerul gândește cu înțelepciune navigarea. La urma urmei, în fiecare dintre aceste categorii pot exista încă cinci sau șase sub-articole.
În total, există 30 de opțiuni posibile de navigare fără senzația de supraîncărcare pentru utilizator și fără a ocupa întreg spațiul ecranului.

Aplicație pe tablete

Integrarea unei astfel de bare de file în tablete, deoarece părea ciudată. Tabletele sunt mult mai versatile, iar utilizarea aceleiași interfețe de utilizare ca și dispozitivele mobile arăta la fel de ciudat ca un adolescent în haine pe care le depășise de mult. Așa că am mers pe un alt traseu. În loc să plasez bara de file în partea de jos, am așezat-o în lateral. Acest lucru s-a dovedit a fi mai convenabil în ceea ce privește utilizarea spațiului pe ecran și părea foarte natural. În plus, mulți utilizatori țin tableta de o parte, așa că aceasta este zona țintă pentru atingerea cu degetul.

Ce zici de desktop?

Pregătește-te... meniu extras. Așa este – încearcă această abordare pe o interfață desktop și te vei confrunta cu o realitate de netăgăduit: această opțiune nu este deloc nouă. Meniurile glisante există de ani de zile și aproape oricine (chiar și mama ta) știe cum funcționează. Aceasta este frumusețea acestei abordări - nimic nou.

Dezvăluirea completă

Nu știu cum să numesc chestia asta. Glisor incrustat? Sau TABurger (TAB „tab” + burger)? Mai mult, nu știu dacă cineva a mai creat o soluție similară. Având în vedere simplitatea unui astfel de meniu, nu suport să cred că am fost primul. Știu că câteva aplicații folosesc meniuri glisante pe unele butoane de file (cum ar fi Tweetbot), dar sunt de obicei concepute ca acces rapid la funcții pentru utilizatorii cu putere, nu ca o modalitate de a construi o ierarhie de navigare. Dacă aveți un astfel de exemplu, spuneți-mi în comentarii.
Nu contează dacă un astfel de meniu este nou sau a fost inventat de mult. Ceea ce contează este dacă este o soluție de navigare mai bună și mai creativă decât un meniu de hamburger. Nu-ți mai spune „Acest site grozav are acest meniu, deci trebuie să fie cel mai bun” sau „Toată lumea o face, așa că trebuie să fie corect”. Designul merită o abordare mai bună, mai atentă.
ACTUALIZĂRI
Collin Eberhardt a notat pe Twitter că aceeași interfață de utilizare este implementată în Windows Phone. Eu sunt utilizator Windows Phone și are dreptate. Deși acest tip de interacțiune este folosit în Windows Phone doar pentru opțiunea „mai mult” din bara de file.

James Perich a dat un alt exemplu pe Twitter. Aruncă o privire la AHTabBarController creat de Arthur Hemmer.

Am făcut doar layout-ul până acum.

5. Descărcați biblioteca jquery-3.3.1.min.js

Conectăm două fișiere la documentul nostru HTML înainte de eticheta body de închidere, unul dintre ele este încă gol.

6. Creați un eveniment în JS

Scriem următorul cod în fișierul script.js

$(funcție())(
$(".menuBurger").on("click", function())(
$(".menu").slideToggle(200, function())(
if($(acest).css(„afișare”) === „niciunul”)(
$(this).removeAttr(„stil”);
}
});
});
});

Nu vom analiza codul JS în detaliu, ne vom limita la comentarii generale. Il pot recomanda celor care sunt interesati de programare in JS

Această linie $(".menuBurger").on("click", function())( monitorizează evenimentul clic pe un element cu clasa .menuBurger .

$(".menu").slideToggle(200, function())( aici funcția slideToggle() este aplicată meniului în sine, care extinde sau restrânge alternativ elementele selectate de pe pagină în 200 de milisecunde.

$(this).removeAttr("stil"); - elimină afișarea: niciuna din stilurile inline;

Acum, când dați clic pe hamburger, meniul se extinde și se prăbușește, dar există o problemă: atunci când este extins, meniul mută în jos conținutul principal al site-ului, dar este corect dacă este deasupra conținutului. În același timp, viteza de încărcare a paginii are de suferit, mai ales pe internetul mobil.

6. Extinderea meniului în partea de sus a conținutului

Această problemă este rezolvată folosind poziționarea meniului.

În codul CSS principal trebuie să adăugați

Meniul (
poziție: relativă;
}

În interogarea media: .menu (
fundal: #eee;
poziție: absolută;
}

După aceasta, meniul de hamburger se va extinde în partea de sus a conținutului principal. Așa ar trebui să fie.

Meniu de hamburger în CSS

1. Dezactivați și ștergeți toate scripturile

2. Introduceți o linie de cod în fișierul HTML între etichetele div și ul

3. Înlocuiți eticheta div cu clasa .menuBurger cu etichetă

4. Conectați intrarea ID la atributul for label prin #menuCSS

Ca rezultat, când faceți clic pe pictograma hamburger de meniu, în caseta de selectare apare o bifă.

5. Adăugați pseudoclasa bifată la interogarea media

#menuCSS:verificat (
afișaj: niciunul;
}

Aceasta înseamnă că atunci când dați clic pe pictogramă, în caseta de selectare este plasată o bifare, dar este ascunsă pe ecran, doar pictograma este vizibilă. Ideea este că dacă caseta de selectare nu este bifată, atunci meniul este închis, iar dacă este bifat, atunci meniul este extins. Evenimentul cu deschiderea și închiderea meniului depinde de starea casetei de selectare.

6. Ascundeți intrarea în CSS

#menuCSS (
afișaj: niciunul;
}

7. Schimbați codul de la punctul 5, vedeți mai sus în articol pentru următoarele

#menuCSS:bifat + .menu (
afisare: bloc;
}

Dacă este bifată legătura dintre etichetă și intrare #menuCSS, atunci meniul este extins. Asta e toată magia, meniul hamburger funcționează în CSS pur și dacă îi adaugi o animație lină, atunci nu vei simți nicio diferență față de meniul JS.

Încercați să micșorați browserul și veți vedea clar cum funcționează meniul CSS hamburger

Concluzie

Ambele variante funcționează. Meniul din JS, să spunem, este corect din punctul de vedere al utilizării codului. Un meniu în CSS este o „cârjă”, un fel de „manifestare a ingeniozității”, potrivită pentru cei care nu vor să înțeleagă JS și urmează să-l folosească doar în proiectele lor. Pentru site-urile web personalizate, nu există „cârje”; recomand cu tărie realizarea de layout-uri adaptate pentru utilizarea în continuare a JS de către alți specialiști.