Viimeisin päivitetty 21.1.2019.

Puhdas CSS off-canvas hampurilaisvalikko ei ole mikään uusi löytö. Loppujen lopuksi Chris Coyier kirjoitti tästä tekniikasta jo marraskuussa 2012.

• Jos tämä on sinulle vanha temppu, odota hetki. Olen parantanut Chrisin esimerkkiä, ja ottaisin mielelläni palautetta.
• Jos tämä on sinulle uutta, älä huoli. Sinulla on paljon seuraa, sillä näyttää siltä, että suuri osa webistä ei ole vielä oikeastaan tajunnut tätä.

Sen avulla rakennamme yksinkertaisen, responsiivisen off-canvas-hampurilaisvalikon pelkällä CSS:llä, joka on helppo sisällyttää omaan projektiisi. Mutta ensin…

Mitä vikaa JavaScriptissä on?

Ei mitään.

Aaron Gustafson selittää Progressive Enhancementsin merkityksen ja JavaScriptin roolin web-kehityksessä paremmin kuin minä ikinä pystyisin. Sinun kannattaa lukea hänen postauksensa. Mutta lyhyyden vuoksi yritän tiivistää sen:

• ”Ydintehtävät voidaan aina toteuttaa ilman JavaScriptiä.”
• Ydintehtävät tulisi tehdä vakaimmalla tasolla (eli ei JavaScriptillä).
• Progressiiviset parannukset eivät ole JavaScriptiä vastaan. Kyse on vain oikeiden teknologioiden omaksumisesta oikeassa kerroksessa.
• ”Koska on olemassa jokin mahdollisuus, että JavaScript ei toimi, meidän on aina otettava tämä mahdollisuus huomioon.”
• Ei ole koskaan hyvä idea jättää huomiotta potentiaalisia käyttäjiä.
• Progressiiviset parannukset on vain hyvää insinööritaitoa.

Tehdään siis mahdollisimman paljon HTML:n ja CSS:n avulla. Sitten annamme JavaScriptin tehdä taikojaan sopivammalla kerroksella – parannamme jo olemassa olevaa käyttöliittymää.

Vaihe 1: HTML

Kuten ehkä tiedät, ensimmäinen askel on aina vankan, hyvin harkitun HTML-peruskerroksen kirjoittaminen.

Huomaa: Käytän esimerkissäni Font Awesomeia kuvakkeisiin.

Näyttää melko tavanomaiselta, eikö? Meillä on:

• Esimerkkimme <header>-elementti
• Hampurilaisen (”fa-bars”) kuvake
• Pääotsikko (tai mahdollisesti logo)
• Navigaatio <nav>-elementissä
• Suljin-kuvake <nav>-elementti
• Suljin-kuvake
• …close”) navigoinnin sisällä (tästä lisää myöhemmin)
• ”taustakuvake” navigoinnin jälkeen. Miksi se on ankkuritunniste? Selitän myöhemmin.

Vaihe 2: Tehdään siitä helppokäyttöisempi

Hyväksyttävyys ei saisi koskaan jäädä jälkikäteen ajateltavaksi – kuten sen jälkeen, kun olet kirjoittanut sovelluksen. Se pitäisi suunnitella alusta alkaen. Muutamien perusnäkökohtien lisääminen nyt ei ainoastaan paranna sivustosi yleistä saavutettavuutta, vaan se antaa sinulle (kehittäjälle) paremman merkinnän, jota voit hyödyntää JavaScriptissäsi!

Sen jälkeen lisäämme vielä muutaman attribuutin ja jonkin verran vain ruudunlukijalle tarkoitettua tekstiä:

Tässä on pikainen erittely kaikista näistä attribuuteista ja siitä, miten ne toimivat:

• Lisäsimme uniikit ID:t, jotta voimme kohdistaa HREF:t kohteeseemme (lisää siitä, miten tämä toimii myöhemmin).
• Olemme antaneet painikkeille informatiivisen merkinnän ruudunlukijoita varten käyttämällä.
• Olemme piilottaneet kuvakkeet ruudunlukijoilta käyttämällä , koska ne ovat visuaalisia esityksiä, ja lisänneet vain ruudunlukijalle tarkoitetun tekstin <span class=”sr-only”>-elementeillä.
• Olemme poistaneet ”taustan” tabulaatioindeksistä elementillä . Se on luonteeltaan puhtaasti visuaalinen, emmekä halua hämmentää näkövammaisia ja vain näppäimistöä käyttäviä käyttäjiämme.
• Olemme lisänneet amazing-attribuutin asettaaksemme ”taustan” alkuperäisen (ja semanttisen) tilan. Ei enää roskaa – kuinka jännittävää!

Tässä on tähänastinen tulos:

Kuvio 1: Tyylitetään se!

Lähestymme tätä asiaa mobiili edellä, joten tyrmäämme mobiilin, ”hampurilaismaisen” näkymän (mielenkiintoisen osan).

Ensin saamme vain otsikon ulkoasun kuntoon (ilman vuorovaikutteisuutta):

Tulos:

Vaihe 4: Vuorovaikutteisuus pelkällä CSS:llä

Tehdessäsi widgetit vuorovaikutteisiksi CSS:llä, sinulla on pari vaihtoehtoa:

1. Käytä radioita tai valintaruutuja
2. Käytä :target-pseudoluokkaa.

Radion ja valintaruudun valinta toimivat hämmästyttävän hyvin useimmille widgeteille, kuten tabulaattoreille, modaaleille, pudotuslaatikoille (dropdowns) ja akordioille. Chris Coyier kutsui tätä tekniikkaa ”checkbox hackiksi”. Useat kehittäjät ovat käyttäneet tätä ”hakkeria” off-canvas-valikoissaan, kuten Paul Lewisin Chrome Dev Summit -tapahtuman opetusohjelmassa tai Luis Manuelin morphing hamburger-valikossa.

Mutta :target-pseudoluokka on tässä käyttötapauksessa semanttisempi, koska olemme suoraan tekemisissä navigoinnin kanssa. Saatat olla eri mieltä, ja se on täysin ok! Olisi uskomattoman helppoa ja täysin hyväksyttävää vaihtaa :target-pseudoluokka valintaruutuun.

Kummassakin tekniikassa on kuitenkin omat varoituksensa.

Valintaruudun käyttäminen:

• Vaattaa JavaScriptin sulkemaan off-canvas-valikon, jos yksi valikon sisältämistä linkeistä oli ankkurilinkki samaan sivun tiettyyn osioon.
• Vaattaa <syöttö>-kentän olevan valikon sisarus tai ainakin valikon esi-isän sisarus. Toisin sanoen CSS on hieman hankalampi. Voit kuitenkin pitää <label>-elementin (jopa useita labeleita) muualla.
• <label>-elementti ei ole suoraan fokusoitavissa tai tabulaattoroitavissa, mikä vaatii hieman hankalampaa CSS:ää valintaruudun fokuksen käsittelyyn samalla kun muutat <label>:n näkyvää ulkoasua.
• Näppäimistön navigointi valikon avaamisen ja sulkemisen ympärillä on omituista. Vaikuttaminen tilamuutokseen valintaruudussa tapahtuu näppäimen eikä näppäimen kautta. Vaikka sokeat käyttäjät saattavat ymmärtää, että widgettiä käytetään valintaruudun avulla, näkevät näppäimistön käyttäjät ovat hämmentyneitä, koska valintaruutu ei ole ilmeinen – asia, jonka koin olevan ratkaiseva tässä käyttötapauksessa.

Käyttämällä :target-pseudoluokkaa:

• Lisää off-canvas-valikon avaamisen/sulkemisen selaimen selainhistoriaan (työntämällä hashin osoiteriville). Se edellyttää JavaScriptin suorittamista Event.preventDefault():lla tämän (ja mahdollisesti ärsyttävän sivun alkuun hyppäämisen) välttämiseksi.

Ja saattaa olla muitakin varoituksia, joita en huomannut. Oli miten oli, tekniikan valinta on sekä mieltymyskysymys että riippuvainen projektisi vaatimuksista. Anyway, I’ve digressed…

Tässä on CSS:n interaktiivinen osa:

Tulos klikattaessa:

Miten tämä kaikki toimii

Välttämättä :target-pseudoluokka antaa meille uuden ”tilan” kohdistetun navigoinnin muotoilua varten. Kun main-menu on kohdistettu (ja sen hash on lisätty URL-osoitteeseen), voimme nyt liu’uttaa valikon ulos. Se on vähän kuin :focus-pseudoluokka kohdistetulle elementille (ei itse linkille).

Olemme myös antaneet ”taustan” näkyä, kun navigointi on kohdistettu.

Huomaa, että hampurilaisen pääkuvake on linkitetty navigoinnin ID:hen, kun taas sekä sulkemiskuvake että taustapainikkeet on linkitetty hampurilaisen pääkuvakkeeseen. Näin voimme napsauttaa sulkemiskuvaketta tai taustapainiketta poistaaksemme ”fokuksen” – tai oikeastaan :kohteen – navigoinnista. Jos taustapainike ei olisi linkki, sitä ei voisi klikata ilman JavaScriptiä.

Olen myös ketjuttanut :target-valitsimet CSS:ssä attribuutin kanssa. Tässä tullaan lopulta asteittain parantamaan hampurilaisvalikkoa JavaScriptillä, jotta se ei hyppäisi otsikkoon, kun sitä napsautetaan – jolloin vältytään aiemmin mainitsemaltani varoitukselta. Kun JavaScript kaappaa selaimen hash-käyttäytymisen, :target-pseudoluokka ei enää toimi. Kun tämä tapahtuu, hyödynnämme attribuuttia tyylitellessämme vaihtamista true/false-arvoilla samaan tapaan kuin aiemmin luokkien kanssa.

Sillä välin tämä toimii kuitenkin hienosti ilman JavaScriptiä.

Lisäsin @supports-mediakyselyn tarjotakseni ensisijaisen position:fixed CSS:n selaimille (sekä mobiili- että työpöytäselaimille), jotka tukevat sitä. Muuten vaisut selaimet ja laitteet – katson sinua iOS – saavat position:absolute.

Vaihe 5: Suurempien näyttöjen tyylit

Koska emme halua hampurilaisvalikon näkyvän muilla kuin mobiililaitteilla (tai suuremmilla näytöillä ylipäätään), lisäämme sitä varten tarvittavan mediakyselyn. Sitten muotoilemme sen näyttämään vaakasuuntaiselta navigoinnilta:

Tulos:

Voila! Olemme valmiit!

Kokonaisuutena

Tässä on lopullinen HTML:

Tässä on lopullinen CSS:

Demo

Kokeile itse CodePeniani:
→ Puhdas CSS-hampurilaisvalikko ilman JavaScriptiä.

Huomaa: voit demota myös valikon valintaruutuversion.

Haluatko lisätä JavaScriptin, jotta siitä tulisi liukkaampi?

Vaikka voimme saada off-canvas-valikon toimimaan kokonaan CSS:llä – jolloin sen suorituskyky ja luotettavuus paranevat – tarvitsemme silti JavaScriptin avustamaan jollakin tavalla parantaaksemme molempien tekniikoiden puutteita ympäröivää interaktiivisuutta. JavaScriptiä voi myös käyttää estämään sivun vierittämisen valikon ollessa auki.

On myös syytä huomata, että kohtuullinen (ja luultavasti tärkein) esteettömyyden taso voidaan saavuttaa ilman JavaScriptiä. On kuitenkin vaikeaa tarjota vankkaa saavutettavuuden tasoa ilman JavaScriptin kykyä manipuloida DOM:ia (esim. fokuksen hallinta, ARIA-attribuuttien päivitykset jne.).

Lisätietoa verkkosivuston saavutettavuuden parantamisesta JavaScriptin avulla saat seuraavista artikkeleista:

• ARIA-attribuuttien käyttäminen JavaScriptin tilan asettamiseen & muotoiluun
• Javaskriptin kirjoittaminen saavutettavuus mielessä

Onko sinulla muita ajatuksia tai ehdotuksia?

Haluisin mielelläni kuulla kommenttejasi lähestymistavastani pelkkään CSS- hampurilaisvalikkoon.

Muutoksia ja myöhempiä pohdintoja

Tammikuu 21, 2019: Muokattu artikkeli ja päivitetty koodiesimerkkejä tarpeettomien ARIA-attribuuttien poistamiseksi ja saavutettavuuden parantamiseksi.

Kun olen oppinut lisää ARIAn käytöstä ja & esteettömyystestauksen kehittämisestä yleisesti, olen oivaltanut muutamia asioita:

1. JavaScriptilla on ehdottomasti paikkansa, ja sen pitäisi olla osa mitä tahansa vankkaa esteettömyyskäyttöliittymämallia.
2. JavaScriptia tarvitaan ARIA-maamerkkejä lukuun ottamatta, jotta ARIAa voidaan käyttää oikein. Ja monet käyttämistäni attribuuteista on parempi jättää JavaScriptin lisättäväksi, kun se on ladattu, sen sijaan että se lisättäisiin suoraan markupiin. Tämä konsepti noudattaa hyviä Progressive Enhancement -käytäntöjä – ARIA-tilat ja -ominaisuudet yhdessä JavaScriptin kanssa ovat päivitys, ja ne tulisi käsitellä erillisessä kerroksessa.
3. Aiemmin en käsitellyt tarkennusta kunnolla, koska tarkennus katosi, kun se eteni visuaalisesti piilotettujen linkkien läpi (kun ne oli suljettu). Lisäsin display: none;:n valikon CSS:ään korjatakseni tämän.

Jos siis olet toteuttanut aikaisemman version Pure CSS Off-Canvas Hamburger Menu -valikostani, harkitse sen päivittämistä tähän yksinkertaisempaan ja helppokäyttöisempään versioon!