# 054: Napauttamalla näytettävä mobiilinavigointi - CSS-temppuja

Sisällysluettelo

Meillä on hyvä alku reagoivaan suunnitteluun. Pienimmän ruudun kokoinen valikko jakautuu 2 × 4-ruudukkoon. Se sopii hienosti näytölle, mutta sen ja tuotemerkin välillä se vie kauhean paljon tilaa. Avaamme sen iOS-simulaattorilla ja näemme, että joissakin tapauksissa et näe todellista sisältöä lainkaan.

Katsomme muutamia resursseja navigointimallien käsittelemiseksi, kuten Brad Frostin artikkeli Responsiiviset navigointimallit ja Jason Weaverin Off Canvas. Katsomme myös MDN: n hienoa demoa nimeltä Paperfold.

Lisäämme ylimääräisen linkin navigointiin, jota viime kädessä kutsumme nimellä "Navigointi 'n' Haku", joka toimii painikkeena paljastaa mobiilinavigointi napauttamalla. Mediakyselyn katkaisupisteiden avulla piilotamme ja näytämme tämän painikkeen tarpeen mukaan.

Selaimen vaihtaminen, jota käsittelemme enimmäkseen JavaScriptillä. Hieman riskialtista, koska se syrjäyttää pienillä ruuduilla olevat, joiden JavaScript on poistettu käytöstä - mutta minä vain menen sen kanssa. Tämä luku on niin pieni (pienempi kuin työpöytä ilman JavaScriptiä, joka on varmasti alle 1%), että olen vain ääliö ja juoksen sen kanssa.

Kaikki mitä todella teemme JavaScriptin kanssa, on vaihtaa luokan nimi. Sitä mitä haluan ajatella valtion ohjaamana CSS-kehityksenä. CSS: llä hallitaan kaikkea sitä, mitä näytetään, milloin ja miten. JavaScript vain asettaa luokan ilmoittamaan nykyisen tilan.

Vietämme joukon aikaa lisäämällä "paperitaitettua" CSS: ää, saamaan sen toimimaan oikein ja sijoittamalla sitten haun luomaamme aukkoon pääsisällön yläpuolelle jonkin verran täytteitä.

Viime kädessä kokoa ja sijaintia muokataan sopivaksi vielä mukavammaksi ja lisätään pieni sulkupainike. Menen edestakaisin päähäni tarjoamalla käyttöliittymää tilojen vaihtamiseen tällaisissa asioissa. Toisaalta, nyt kun käyttäjä on paljastanut navigoinnin, miksi heidän pitäisi sulkea se? He ovat jo nähneet sen. Jos he eivät halua käyttää sitä, he voivat vain pyyhkiä sen ohitse. Toisaalta minusta on eräänlainen ärsyttävä, kun en voi vaihtaa tällaisia ​​tiloja muihin sovelluksiin (jostain syystä), joten olen taipuvainen tarjoamaan mekanismin sen tekemiseksi.

Mielenkiintoisia artikkeleita...