Jól kezdjük az érzékeny kialakítást. A menü a legkisebb képernyőméretnél 2 × 4 rácsra oszlik. Szépen elfér a képernyőn, de ez és a márkajelzés között iszonyatosan sok helyet foglal el. Megnyitjuk az iOS szimulátoron, és látjuk, hogy bizonyos esetekben egyáltalán nem láthat tényleges tartalmat.
Megtekintünk néhány forrást a navigációs minták kezelésére, például Brad Frost Responsive Navigation Patterns cikkét és Jason Weaver Off Canvas cikkét. Megnézzük az MDN Paperfold nevű demóját is.
Hozzáadunk egy további linket ahhoz a navigációhoz, amelyet végül „Navigáció 'keresésnek" nevezünk, amely gombként jelenik meg a mobil navigáció felfedésekor, amikor megérinti. A média lekérdezés töréspontjain keresztül ezt a gombot szükség szerint elrejtjük és megmutatjuk.
A navigáció váltása, amelyet többnyire JavaScript-sel kezelünk. Kicsit kockázatos, mivel elidegeníti a kis képernyőkön a letiltott JavaScript-et - de csak megyek vele. Ez a szám olyan kicsi (kisebb, mint a JavaScript nélküli asztali számítógép, ami minden bizonnyal kevesebb, mint 1%), hogy csak bunkó leszek és futok vele.
A JavaScript-szel valóban annyit teszünk, hogy váltunk egy osztály nevét. Erről szeretnék államilag vezérelt CSS fejlesztésként gondolkodni. Az összes ellenőrzés, hogy mit jelenítenek meg, mikor és hogyan kezelik a CSS-sel. A JavaScript csak egy osztályt állít be az aktuális állapot deklarálására.
Egy csomó időt töltünk azzal, hogy a „papírhajtogatott” CSS-t hozzáadjuk, megfelelően működtessük, majd a keresést a fő tartalom felett létrehozott résbe tegyük néhány kitöltéssel.
Végül a méret és a helyzet módosul, hogy még szebben illeszkedjen, és egy kis zárógombot adunk hozzá. Fejemben előre-hátra járok azzal, hogy felhasználói felületet biztosítsak az államoknak az ilyen dolgokra való váltásához. Egyrészt, miután a felhasználó felfedte a navigációt, miért kellene bezárnia? Már látták. Ha nem akarják használni, akkor csak elúszhatnak mellette. Másrészt nagyon idegesítőnek találom, amikor nem tudom átkapcsolni az ilyen állapotokat más alkalmazásokban (valamilyen oknál fogva), ezért hajlandó vagyok biztosítani egy mechanizmust ennek megvalósítására.
