# 054: Mobilna navigacija z dotikom za prikaz - CSS-triki

Kazalo

Odziven dizajn smo dobro začeli. Meni pri najmanjših velikostih zaslona se razdeli na mrežo 2 × 4. Lepo se prilega zaslonu, a med tem in blagovno znamko zavzame strašno veliko prostora. Odpremo ga na simulatorju iOS in vidimo, da v nekaterih primerih dejansko ne vidite nobene vsebine.

Ogledali smo si nekaj virov o ravnanju z navigacijskimi vzorci, na primer članek Brada Frosta Odzivni navigacijski vzorci in Off Canvas Jasona Weaverja. Ogledamo si tudi kul predstavitev MDN, imenovano Paperfold.

Na navigacijo dodamo dodatno povezavo, ki ji na koncu rečemo »Navigation 'n' Search«, ki bo ob pritisku na tipko razkrila mobilno navigacijo. Prek mejnih točk medijskih poizvedb ta gumb po potrebi skrijemo in prikažemo.

Preklop navigacije bomo večinoma obravnavali z JavaScriptom. Nekoliko tvegano, saj odtujuje tiste na majhnih zaslonih z onemogočenim JavaScriptom - vendar grem samo z njim. Ta številka je tako majhna (manjša od namizja brez JavaScripta, kar je zagotovo manj kot 1%), da bom samo kreten in tekel z njim.

Vse, kar v resnici počnemo z JavaScriptom, je preklapljanje imena razreda. To je tisto, kar najraje mislim kot razvoj CSS, ki ga vodi država. Ves nadzor nad tem, kaj je prikazano in kdaj ter kako se obdeluje s CSS. JavaScript samo nastavi razred, ki razglasi trenutno stanje.

Veliko časa se ukvarjamo z dodajanjem CSS-ja v "papirnatih papirjih", pravilnim delovanjem in iskanjem nato z nekaj oblazinjenja postavimo iskanje v vrzel, ki jo ustvarimo nad glavno vsebino.

Konec koncev sta velikost in položaj prilagojena, da se prilegata še lepše in dodan je majhen gumb za zapiranje. V glavi grem sem in tja z zagotavljanjem uporabniškega vmesnika za preklapljanje stanj na takšnih stvareh. Zakaj bi jo morali zdaj, ko je uporabnik razkril navigacijo, zapreti? To so že videli. Če je ne želijo uporabiti, jo lahko preprosto preletijo. Po drugi strani pa mi je nekako nadležno, ko takšnih stanj ne morem preklapljati v drugih aplikacijah (iz nekega razloga), zato sem nagnjen k zagotavljanju mehanizma za to.

Zanimive Članki...