Pictograma Hamburger: noi moduri de utilizare. Creați rapid un meniu hamburger folosind jQuery Adăugați stiluri CSS de bază

2. Introduceți o pictogramă de hamburger în meniul de navigare

Pe site iconfinder.com găsiți pictograma dorită, schimbați culoarea în cea dorită (Editare pictogramă), descărcați în format SVG, deschideți-l în browser, copiați codul din inspectorul web.

Lipiți codul copiat mai sus în loc de textul „Meniu”.

În această etapă, pe rezoluțiile desktop, meniul arată astfel: SVG Am ascuns pictograma scriind următorul cod.

MeniuBurger (
afișaj: niciunul; /* pictograma hamburger ascunsă */
}

3. Accesați interogarea media

Pe o lățime mică a ecranului, de la zero la 530 de pixeli. Trebuie să facem invers, să arătăm pictograma meniu de hamburgerși ascunde toate elementele de meniu la rând.

Ecran @media și (lățime maximă: 530 px) (
.meniul (
afișaj: niciunul; /* elementele de meniu sunt ascunse */
fundal: #f1f2f4;
poziție: absolută;
}

Meniul (
plutire: nici unul; /* elemente de meniu în coloane */
}

MeniuBurger (
display: inline-block; /* pictograma hamburger vizibilă */
}
}

4. Extindeți meniul de hamburger

Ce trebuie făcut înainte de deschidere meniu de hamburger? Este necesar să comentați temporar în CSS codul de interogare media /* afisare: nici unul; */și transformă meniul orizontal într-unul vertical. Pentru a face acest lucru, să anulăm acțiunea pluti, adăugați următorul cod la interogarea media.

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 UI? 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ă se fi împăcat cu asta. Ș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 motivul principal 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.
• Precizie: acest lucru 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:

• Intelegere: 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ă.
• Logodnă: 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 aceste 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 incomodă 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 creat o soluție similară înainte. 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.

Simplă, funcțională, intuitivă și memorabilă, ca orice semn rutier, pictograma hamburger a devenit o adevărată tendință anul trecut și un element integrant al oricărui design modern de site web și aplicație mobilă.

Această pictogramă simplă imită aspectul unei liste de meniu, ideală pentru dispozitive cu ecran mic și site-uri web unde imaginile sunt importante și navigarea trebuie să fie ținută la o parte. Aceasta este o soluție foarte eficientă și viabilă, care îndeplinește cerințele lumii moderne.

Ca orice alt element de interfață, pictograma hamburger poate avea unele abateri de la versiunea originală, în funcție de nevoile fiecărui proiect individual.

În funcție de proiect și temă, pictograma hamburger poate lua diferite forme care completează designul sau poate deveni propria sa caracteristică distinctivă.

Colecția de astăzi include 20 de variante diferite ale pictogramei hamburger.

Pictograma hamburger de la designerul Dave Games emană imediat multă energie caldă. Stilul de desene animate adaugă joacă și creează doar cele mai pozitive emoții. Puteți utiliza în siguranță o astfel de pictogramă pe majoritatea interfețelor ilustrate moderne.

Această pictogramă val oceanului a fost proiectată de Mat Walker. Se va simți grozav la diverse proiecte dedicate mării. Albastrul deschis ca culoare principală și chenarul din jurul lui fac această insignă exclusivă.

O implementare curată, strălucitoare și plină de spirit va permite acestui design să funcționeze ca o pictogramă de meniu pe site-urile de gătit. În acest caz, interfața va primi o întorsătură artistică plăcută.

Designerul oferă 10 versiuni interesante de icoane de hamburger, care sunt realizate cu suflet. Seria acoperă diferite tipuri de burgeri: unul cu brânză, altul cu slănină, altul cu curcan și mulți alții. Dacă aveți un site web sau o aplicație mobilă dedicată unui restaurant fast-food, atunci cu siguranță vă vor veni la îndemână. Sunt atât de interesante din punct de vedere vizual încât își pot găsi un loc în aproape orice temă.

Și acest proiect reprezintă un hamburger realist în vector. Butonul de inchidere se face sub forma de cartofi prajiti, luand forma unui “X”, cu sau fara sos. Aceasta este o soluție creativă care poate adăuga exotism designului paginii.

Site-ul oficial Star Wars include o pictogramă interesantă de hamburger care se rotește. Fiecare linie este împărțită în două părți pentru a obține vectorul de reflexie al luminii săbiilor laser. Soluția sporește impresia generală a site-ului și întărește brandul.

Meniul Burger de Peter Twaury este o versiune frumos ilustrată a pictogramei. Caracteristica cheie a acestei pictograme este alegerea culorilor care imită chifla tăiată și chifletul de carne.

Seria are diverse opțiuni de hamburger, care sunt implementate folosind stilul de linie. Aici veți găsi un hamburger dublu, un hamburger cu brânză și salată verde, un sandviș deschis și multe altele. Găsirea soluției perfecte pentru interfața dvs. îngrijită și plată va fi ușor de adăugat aromă și fler.

Artistul demonstrează trei versiuni distractive ale butonului: un hamburger clasic, un cheeseburger și un hot dog. Fiecare se bazează pe una sau două culori, ceea ce îl face potrivit pentru o varietate de interfețe mici. Aici culoarea creează aspectul potrivit pentru sandviș.

Artistul oferă o mică animație care include doar o pictogramă de meniu și mai multe tranziții netede care însoțesc transformarea într-un „X” obișnuit (butonul de închidere). Există efecte speciale care apar atunci când treceți cu mouse-ul sau faceți clic.

Spre deosebire de majoritatea exemplelor de mai sus, acest exemplu arată mai degrabă o manipulare pricepută a greutății decât a culorii. Liniile de sus și de jos sunt mai îndrăznețe decât mijlocul și creează aspectul potrivit de „hamburger”. Artistul a îndeplinit cu succes sarcina.

Animația de meniu a pictogramei ninja de la Andrew Kovardakov diferă de majoritatea butoanelor de hamburger și oferă o soluție interesantă și extraordinară, cu o tentă misterioasă și atractivă. Aici, fiecare linie este un ninja într-un vector.

Și această icoană este o ilustrare a unui burger cu salată verde și brânză. Poate adăuga un pic de poftă oricărei interfețe plictisitoare. O soluție excelentă pentru site-ul unui restaurant sau cafenea.

Acesta este un articol în care puteți găsi discuții interesante despre pictograma de meniu la modă. Este marcat cu o imagine care arată trei variante ale butonului pentru hamburger. Prima este o ilustrație plată premium, a doua este o pictogramă colorată cu trei linii, iar a treia este o versiune monocromatică a celui de-al doilea design - cea mai populară alegere printre designeri.

GIF-ul arată tranzițiile line între starea inițială a acestei pictograme minimaliste și elegante și starea sa finală. Deoarece animația începe de la linia de jos, este mai scurtă decât celelalte.

Meniul de hamburger al lui Liam Spradlin arată ca un set de semne de carte de școală. Această implementare este îndrăzneață și oarecum brută. Această pictogramă este imediat vizibilă, cu toate acestea, poate fi dificil să găsiți mediul potrivit pentru ea.

Până acum am analizat pictogramele separat, dar ele funcționează bine cu cuvintele, mai ales când cuvântul este „Meniu”. Deși poate părea exagerat, ele arată sofisticate împreună. Liniile ultra-subțiri de 1px lățime utilizate în acest caz se potrivesc împreună ca piese de puzzle.

Proiectul demonstrează că o icoană de hamburger poate arăta mai strălucitoare și mai atractivă atunci când este înrămată. Aceasta este o alegere excelentă pentru dispozitivele mici, unde o astfel de pictogramă va fi convenabilă pentru navigarea tactilă.

Designerul afișează o pictogramă simplă, elegantă, cu trei linii, care suferă diferite metamorfoze pentru a deveni o cruce sau o săgeată. Animația include mai multe soluții care pot fi utile pentru orice proiect.

Rezultate

La prima vedere, poate părea că un lucru atât de mic precum o pictogramă de meniu nu merită să-i acordați o atenție deosebită. Dar dacă arăți puțină imaginație, îl poți transforma într-un fel de evidențiere a interfeței tale. Mai ales dacă dezvoltatorii încep să se joace cu semnificația lui și folosesc tehnici artistice pentru a-l face mai neconvențional și mai atrăgător.

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 layout HTML

Adăugarea stilurilor CSS de bază

Adăugarea JS

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 ("afisare") === "niciuna")( $(this).removeAttr("stil"); ) )); )); ));

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!