Ultima actualizare la 21 ianuarie 2019.

Menuurile hamburger off-canvas CSS pur și simplu nu sunt o descoperire recentă. La urma urmei, Chris Coyier a scris despre această tehnică în noiembrie 2012.

• Dacă acesta este un truc vechi pentru tine, atunci stai puțin cu mine. Am îmbunătățit exemplul lui Chris și mi-ar plăcea să primesc feedback-ul tău.
• Dacă acesta este nou pentru tine, nu-ți face griji. Aveți o mulțime de companie, deoarece se pare că o mare parte a web-ului nu a prins de fapt încă.

Cu asta, vom construi un meniu hamburger off-canvas simplu și receptiv, folosind doar CSS, care va fi ușor de încorporat în propriul proiect. Dar mai întâi…

Ce este în neregulă cu JavaScript?

Nimic.

Aaron Gustafson explică importanța Progressive Enhancements și rolul lui JavaScript în dezvoltarea web mai bine decât aș putea eu vreodată. Ar trebui să citiți postarea sa. Dar, de dragul conciziei, voi încerca să-l rezum:

• „Sarcinile de bază pot fi întotdeauna realizate fără JavaScript.”
• Sarcinile de bază ar trebui să fie realizate pe stratul cel mai stabil (adică nu JavaScript).
• Progressive Enhancements nu este anti-JavaScript. Este vorba doar despre adoptarea tehnologiilor potrivite pe stratul potrivit.
• „Pentru că există o oarecare șansă ca JavaScript să nu ruleze, trebuie să ținem cont întotdeauna de această șansă.”
• Nu este niciodată o idee bună să ignorăm potențialii utilizatori.
• Progressive Enhancements este doar o bună inginerie.

Acum, vom face cât de mult putem cu HTML și CSS. Apoi îl vom pune pe JavaScript să-și facă magia pe un strat mai adecvat – îmbunătățind interfața de utilizare deja existentă.

Pasul 1: HTML

După cum probabil știți, primul pas este întotdeauna scrierea unui strat de bază solid, bine gândit, de HTML.

Nota: Folosesc Font Awesome pentru pictogramele din exemplul meu.

Apare destul de standard, nu? Avem:

• Elementul nostru părinte <header>
• Icoana hamburger („fa-bars”)
• Un titlu principal (sau potențial un logo)
• Navigația într-un element <nav>
• O pictogramă de închidere („fa-close”) în interiorul navigației (mai multe despre acest lucru mai târziu)
• Un „fundal” după navigare. De ce este o etichetă ancoră? Voi explica mai târziu.

Pasul 2: Să o facem mai accesibilă

Accesibilitatea nu ar trebui să fie niciodată un gând ulterior – ca după ce ați scris aplicația. Ar trebui să fie planificată încă de la început. Adăugarea câtorva considerații de bază acum nu numai că va îmbunătăți accesibilitatea generală a site-ului dumneavoastră, dar vă va oferi dumneavoastră (dezvoltatorul) un marcaj mai bun pe care să-l utilizați în JavaScript!

Cu aceasta, vom adăuga încă câteva atribute și un text destinat doar cititorilor de ecran:

Iată o defalcare rapidă a tuturor acestor atribute și a modului în care funcționează:

• Am adăugat ID-uri unice pentru direcționarea HREF-urilor noastre (mai multe despre cum funcționează acest lucru mai târziu).
• Am furnizat o etichetă informativă a butoanelor pentru cititorii de ecran folosind
• Am ascuns pictogramele de cititorii de ecran cu , deoarece sunt reprezentări vizuale, și am adăugat text numai pentru cititorii de ecran cu elementele <span class=”sr-only”>.
• Am scos „fundalul” din indexul de tabulare cu un element . Este de natură pur vizuală și nu dorim să îi derutăm pe utilizatorii noștri cu deficiențe de vedere și pe cei care folosesc doar tastatura.
• Am adăugat atributul amazing pentru a seta starea inițială (și semantică) a „fundalului”. Gata cu gunoiul – ce interesant!

Iată rezultatul de până acum:

Pasul 3: Să-l stilizăm!

Vom aborda acest lucru mai întâi pe mobil, așa că haideți să eliminăm vizualizarea mobilă, „hamburger-y” (partea interesantă).

În primul rând, vom obține doar aspectul corect al antetului (fără interactivitate):

Rezultatul:

Pasul 4: Interactivitate cu CSS pur

Când faceți widget-uri interactive cu CSS, aveți câteva opțiuni:

1. Utilizați radiouri sau casete de selectare
2. Utilizați pseudo-clasa :target.

Radiourile și casetele de selectare funcționează uimitor de bine pentru majoritatea widget-urilor, cum ar fi tab-uri, modale, dropdown-uri și acordeoane. Chris Coyier a supranumit această tehnică „the checkbox hack”. Mai mulți dezvoltatori au folosit acest „hack” pentru meniurile lor off-canvas, cum ar fi în tutorialul lui Paul Lewis pentru Chrome Dev Summit sau meniul hamburger morphing al lui Luis Manuel.

Cu toate acestea, pseudo-clasa :target este mai semantică în acest caz de utilizare, deoarece avem de-a face direct cu navigarea. S-ar putea să nu fiți de acord, și asta este complet în regulă! Ar fi incredibil de ușor și perfect acceptabil să schimbați pseudo-clasa :target cu o casetă de selectare.

Cei două tehnici au totuși avertismentele lor.

Utilizarea unui checkbox:

• Exigă ca JavaScript să închidă meniul off-canvas dacă una dintre legăturile din meniu a fost o legătură de ancorare către o anumită secțiune din aceeași pagină.
• Exigă ca câmpul <input> să fie un frate al meniului sau cel puțin un frate al strămoșului meniului. Cu alte cuvinte, CSS-ul este un pic mai complicat. Totuși, puteți avea <label> (chiar și mai multe etichete) în altă parte.
• Elementul <label> nu va putea fi focalizat sau tabulat în mod direct, necesitând un CSS puțin mai complicat pentru gestionarea focalizării pe caseta de selectare, schimbând în același timp aspectul vizibil al <label>.
• Navigația prin tastatură în jurul deschiderii/închiderii meniului va fi ciudată. Afectarea unei schimbări de stare pe o casetă de selectare se face prin intermediul tastei, nu al tastei. În timp ce utilizatorii nevăzători pot înțelege că widgetul este operat de o casetă de selectare, utilizatorii de tastatură cu vedere vor fi confuzi, deoarece caseta de selectare nu este aparentă – un lucru pe care l-am considerat a fi o problemă în acest caz de utilizare.

Utilizarea pseudoclasei :target:

• Adăugă deschiderea/închiderea meniului off-canvas la istoricul browserului (împingând hash-ul în bara de adrese). Va fi nevoie ca JavaScript să ruleze Event.preventDefault() pentru a evita acest lucru (și saltul potențial enervant în partea de sus a paginii).

Și este posibil să existe și alte atenționări pe care le-am omis. În orice caz, alegerea tehnicii este atât o chestiune de preferință, cât și o chestiune supusă cerințelor proiectului dumneavoastră. Oricum, am divagat…

Iată partea interactivă a CSS-ului:

Rezultatul la clic:

Cum funcționează toate acestea

În esență, pseudo-clasa :target ne oferă o nouă „stare” pentru stilizarea navigației vizate. Atunci când main-menu a fost țintit (cu hash-ul său adăugat la URL), putem acum să glisăm meniul. Este un pic ca o pseudo-clasă :focus pentru elementul vizat (nu pentru linkul în sine).

Am permis, de asemenea, ca „fundalul” să se afișeze atunci când navigația este vizată.

Vă veți da seama că pictograma principală a hamburgerului este legată de ID-ul navigației, în timp ce atât pictograma de închidere, cât și butoanele de fundal sunt legate de pictograma principală a hamburgerului. Acest lucru ne permite să facem clic pe pictograma de închidere sau pe fundalul de fundal pentru a elimina „focusul” – sau de fapt :target – de pe navigare. Dacă fundalul nu ar fi fost un link, nu ar fi putut fi apăsat fără JavaScript.

Am înlănțuit, de asemenea, selectorii :target împreună cu atributul în CSS. Acesta va fi în cele din urmă locul în care vom îmbunătăți progresiv meniul hamburger cu JavaScript pentru a nu sări la antet atunci când se face clic pe el – evitând avertismentul pe care l-am menționat mai devreme. Faptul că JavaScript deturnează comportamentul hash al browserului înseamnă că pseudo-clasa :target nu va mai funcționa. Când se va întâmpla acest lucru, vom profita de atribut pentru a stiliza comutarea cu valori true/false, la fel cum am fi putut face în trecut cu clasele.

Între timp, însă, acest lucru funcționează minunat fără JavaScript.

Am adăugat interogarea media @supports pentru a oferi poziția preferată:fixed CSS browserelor (atât mobile cât și desktop) care o acceptă. În caz contrar, browserele și dispozitivele șchioape – mă uit la tine, iOS – vor primi position:absolute.

Pasul 5: Stiluri pentru ecrane mai mari

Din moment ce nu dorim ca meniul hamburger să se afișeze pentru dispozitivele care nu sunt mobile (sau pentru ecrane mai mari în general), vom adăuga interogarea media necesară pentru asta. Apoi îl vom stiliza pentru a arăta ca o navigare orizontală:

Rezultatul:

Voila! Am terminat!

Punând totul cap la cap

Iată HTML-ul final:

Iată CSS-ul final:

Demo

Încercați și dumneavoastră CodePen-ul meu:
→Meniu hamburger CSS pur fără JavaScript.

Nota: puteți demonstra și versiunea cu căsuță de bifat a meniului.

Vreți să adăugați JavaScript pentru a-l face mai șmecher?

În timp ce putem face meniul off-canvas să funcționeze în întregime cu CSS – îmbunătățind performanța și fiabilitatea acestuia – vom avea totuși nevoie de JavaScript pentru a asista într-un fel pentru a îmbunătăți interactivitatea care înconjoară dezavantajele oricăreia dintre cele două tehnici. De asemenea, puteți utiliza JavaScript pentru a preveni derularea pe pagină în timp ce meniul este deschis.

De asemenea, merită menționat faptul că un nivel decent (și, fără îndoială, cel mai important nivel) de accesibilitate poate fi obținut fără JavaScript. Cu toate acestea, este dificil să se asigure un nivel robust de accesibilitate fără capacitatea JavaScript de a manipula DOM (de exemplu, gestionarea focalizării, actualizarea atributelor ARIA etc.).

Pentru mai multe informații despre îmbunătățirea accesibilității site-ului dvs. web prin JavaScript, consultați următoarele articole:

• Utilizarea atributelor ARIA pentru setarea stării JavaScript & styling
• Scrierea JavaScript cu accesibilitatea în minte

Aveți alte gânduri sau sugestii?

Aș dori să aud comentariile dvs. cu abordarea mea a unui meniu hamburger CSS pur.

Editări și ruminații ulterioare

21 ianuarie 2019: Articol editat și exemple de cod actualizate pentru a elimina atributele ARIA inutile și pentru a îmbunătăți accesibilitatea.

Pe măsură ce am învățat mai multe despre utilizarea ARIA și dezvoltarea & testării pentru accesibilitate în general, am realizat câteva lucruri:

1. JavaScript își are cu siguranță locul său și ar trebui să facă parte din orice model robust de interfață cu accesibilitate robustă.
2. Exceptând reperele ARIA, JavaScript este necesar pentru a utiliza ARIA în mod corespunzător. Și, multe dintre atributele pe care le-am folosit, cum ar fi sunt mai bine lăsate pentru ca JavaScript să le adauge odată încărcate, în loc să le adauge direct în marcaj. Acest concept urmează bunele practici de îmbunătățire progresivă – stările și proprietățile ARIA împreună cu JavaScript sunt un upgrade și ar trebui să fie gestionate pe un strat separat.
3. Anterior, nu am gestionat focalizarea în mod corespunzător, deoarece focalizarea dispărea pe măsură ce avansa prin legăturile ascunse vizual (atunci când erau colapsate). Am adăugat un display: none; la CSS-ul meniului pentru a rezolva acest lucru.

Așa că, dacă ați implementat o versiune anterioară a meniului meu Pure CSS Off-Canvas Hamburger Menu, vă rog să luați în considerare actualizarea acestuia la această versiune mai simplă și mai accesibilă!

.