Creați rapid un meniu de hamburger folosind jQuery. Pictograma Hamburger: noi moduri de a folosi magia în lucrurile mici

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ă simulează aspect lista de meniuri, 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. Coperti de serie diverse tipuri burgeri: unul cu branza, altul cu bacon, al treilea cu curcan si multe altele. Dacă aveți un site web sau aplicație mobilă dedicat restaurantului fast food, atunci cu siguranță 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.

Burger Menu de Peter Twaury este o versiune frumos ilustrată a pictogramei. Caracteristica cheie a acestei pictograme este alegerea culorilor care imită chifla tăiată și chiftelea 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 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 fade care însoțesc transformarea într-un „X” obișnuit (butonul de închidere). Există efecte speciale care apar atunci când treceți 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 ca niște 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, o 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.

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 a avut loc în timp ce observam 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, de ce 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. Folosirea 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 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ă adormi lista completa elemente de meniu ascunse în spatele pictogramei 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 care poartă 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ăluire 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 un astfel de meniu, așa că 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.

Salutare tuturor. Corvax este cu tine.

Astăzi vreau să continui subiectul meniurilor mobile și te invit să o faci, dar numai folosind jQuery. Să mergem.

• Crearea unui aspect de meniu HTML
• Acasă
• Pagina 1
• Pagina 2
• Pagina 3

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; latime: 100%-stânga: 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ă procesarea funcției principale) 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!

Până acum am făcut doar layout-ul.

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())(
$(".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ă conținutul principal al site-ului în jos, 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
Meniu (
}

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 urmare, când faceți clic pe pictograma hamburger de meniu, în caseta de selectare apare o bifă.

5. Adăugați pseudo-clasa 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:verificat (
}

#menuCSS (

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

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”;

Probabil ați văzut pe multe site-uri un buton sub forma unei pictograme cu trei dungi orizontale, care amintește de un hamburger. În majoritatea cazurilor, la rezoluțiile de ecran mari și medii acest buton este ascuns și apare doar pe ecranele mici.

În spatele acestui buton sunt ascunse elementele meniului de navigare, ideea este că la o anumită lățime a ecranului, dând clic pe pictogramă, utilizatorul însuși extinde meniul dacă are nevoie. Dacă nu este necesar, atunci trece imediat la vizualizarea conținutului fără a fi distras de meniu, deoarece este ascuns.

Partea activă a acestei sarcini, și anume extinderea și restrângerea elementelor de meniu hamburger, poate fi implementată folosind JS folosind biblioteca jQuery sau CSS pur. Aici voi face imediat o rezervare că în CSS acest lucru se face într-un „mod cârjă” pe casetele de selectare, mai târziu voi explica ce este asta.

Meniul Hamburger în JS 1. Aranjați meniul obișnuit de navigare de sus cu un paragraf din partea de conținut a site-ului

Meniu

• Crearea unui aspect de meniu HTML


• Tarife


• Produse


• Servicii


• Contacte

Conținutul site-ului principal

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

Pe site iconfinder.com găsim pictograma dorită, schimbăm culoarea în cea dorită (Edit Icon), o descărcam în format SVG, o deschidem în browser, copiem codul din inspectorul web.

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

Meniu

În această etapă, pe rezoluțiile desktop, meniul arată așa am ascuns pictograma SVG 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 opusul, să arătăm pictograma meniului hamburger și să ascundem toate elementele din meniu la rând.

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

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

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

4. Extindeți meniul de hamburger

Ce ar trebui să faci înainte de a deschide meniul de hamburgeri? Trebuie să comentați temporar codul CSS al interogării media /* afișare: niciunul; */ și transformați meniul orizontal într-unul vertical. Pentru a face acest lucru, să anulăm acțiunea de float și să adăugăm următorul cod la interogarea media.