# 054: „Bakstelėkite ir parodykite“ mobilioji navigacija - CSS-gudrybės

Turinys

Mes gerai pradedame reaguojantį dizainą. Mažiausio ekrano dydžio meniu suskirstomas į 2 × 4 tinklelį. Jis puikiai tinka ekrane, tačiau tarp to ir prekės ženklo jis užima nepaprastai daug vietos. Mes jį atidarome „iOS“ treniruoklyje ir matome, kad kai kuriais atvejais jūs negalite pamatyti jokio faktinio turinio.

Pažvelkime į kelis išteklius, kaip elgtis su naršymo modeliais, pavyzdžiui, Brado Frosto straipsnį „Responsive Navigation Patterns“ ir Jason Weaver „Off Canvas“. Mes taip pat žiūrime į MDN demonstracinę versiją, vadinamą „Paperfold“.

Pridedame papildomą nuorodą į navigaciją, kurią galiausiai vadiname „Navigacija„ n “paieška“, kuri veiks kaip mygtukas, kuris paliesdamas parodys mobiliąją navigaciją. Naudodamiesi medijos užklausų lūžio taškais, mes paslėpiame ir rodome šį mygtuką, jei reikia.

Naršymo perjungimas, kurį daugiausia tvarkysime naudodami „JavaScript“. Šiek tiek rizikinga, nes atstumia tuos, kurie rodomi mažuose ekranuose su išjungta „JavaScript“, bet aš tiesiog einu su juo. Šis skaičius yra toks mažas (mažesnis nei darbalaukyje be „JavaScript“, kuris tikrai yra mažesnis nei 1%), kad aš tiesiog būsiu šūdas ir bėgsiu su juo.

Viskas, ką iš tikrųjų darome su „JavaScript“, yra perjungti klasės pavadinimą. Tai, ką man patinka galvoti apie valstybės valdomą CSS plėtrą. Visa kontrolė, kas rodoma, kada ir kaip tvarkoma naudojant CSS. „JavaScript“ tiesiog nustato klasę deklaruoti dabartinę būseną.

Mes praleidžiame krūvą laiko, kai įtraukiame į „popieriaus sulankstomą“ CSS, tinkamai jį veikiame, o tada įdėdami paiešką į tarpą, kurį sukuriame virš pagrindinio turinio per tam tikrą užpildymą.

Galų gale, dydis ir padėtis yra patobulinta, kad tilptų dar gražiau, ir pridedamas mažas uždarymo mygtukas. Galvoje einu pirmyn ir atgal, teikdamas vartotojo sąsają būsenoms perjungti į tokius dalykus. Viena vertus, dabar, kai vartotojas atskleidė navigaciją, kodėl jam reikėtų ją uždaryti? Jie jau matė. Jei nenori juo naudotis, gali tiesiog pralėkti pro jį. Kita vertus, man atrodo, kad tai erzina, kai negaliu perjungti tokių būsenų kitose programose (dėl kokių nors priežasčių), todėl esu linkęs pateikti mechanizmą tai padaryti.

Įdomios straipsniai...