# 054: Dodirni za prikaz mobilne navigacije - CSS-trikovi

Sadržaj

Dobro smo započeli s responzivnim dizajnom. Izbornik s najmanjim veličinama zaslona rastavlja se na mrežu × 2 × 4. Lijepo se uklapa u zaslon, ali između toga i markiranja zauzima strašno puno prostora. Otvaramo ga na iOS simulatoru i vidimo da u nekim slučajevima uopće ne možete vidjeti stvarni sadržaj.

Pogledat ćemo nekoliko resursa o tome kako postupati s navigacijskim uzorcima, poput članka Breda Frosta Responsive Navigation Patterns i Off Canvas Jasona Weavera. Također gledamo cool demonstraciju na MDN-u pod nazivom Paperfold.

Dodamo dodatnu vezu na navigaciju koju na kraju nazivamo "Navigacija 'n' Pretraživanje" koja će djelovati kao gumb za otkrivanje mobilne navigacije kada se dodirne. Kroz točke prekida medijskih upita taj gumb skrivamo i prikazujemo po potrebi.

Promjenom navigacije uglavnom ćemo se nositi s JavaScriptom. Pomalo rizično jer otuđuje one na malim ekranima s onemogućenim JavaScriptom - ali ja samo idem s tim. Taj je broj toliko mali (manji od radne površine bez JavaScripta, što je sigurno manje od 1%) da ću jednostavno biti kreten i trčati s njim.

Sve što stvarno radimo s JavaScriptom je prebacivanje naziva klase. To je ono što volim smatrati razvojem CSS-a kojim upravlja država. Sva kontrola onoga što se prikazuje i kada i kako se rukuje s CSS-om. JavaScript samo postavlja klasu koja deklarira trenutno stanje.

Provodimo hrpu vremena baveći se dodavanjem CSS-a u "papirnatom papiru", postizanjem ispravnog rada, a zatim postavljanjem pretraživanja u prazninu koju stvorimo iznad glavnog sadržaja pomoću nekih dodataka.

U konačnici, veličina i položaj su prilagođeni kako bi se još ljepše uklopili i dodan je mali gumb za zatvaranje. U glavi se vraćam naprijed-natrag pružajući korisničko sučelje za prebacivanje stanja na ovakve stvari. S jedne strane, sada kada je korisnik otkrio navigaciju, zašto bi je trebao zatvoriti? Oni su to već vidjeli. Ako ga ne žele koristiti, mogu ga samo provući. S druge strane, nekako mi smeta kad ne mogu prebacivati ​​ovakva stanja na druge aplikacije (iz nekog razloga), pa sam sklon pružiti mehanizam za to.

Zanimljivi članci...