Dobrý štart do responzívneho dizajnu máme dobrý. Ponuka s najmenšou veľkosťou obrazovky sa rozpadá na mriežku 2 × 4. Pekne sa hodí na obrazovku, ale medzi touto značkou a značkou zaberá strašne veľa miesta. Otvoríme ho na simulátore iOS a zistíme, že v niektorých prípadoch nevidíte vôbec žiadny skutočný obsah.
Zoznámime sa s niekoľkými zdrojmi, ako zaobchádzať s navigačnými vzormi, napríklad s článkom Brad Frosta Responsive Navigation Patterns a Off Canvas Jasona Weavera. Pozeráme sa tiež na super ukážku na MDN s názvom Paperfold.
Pridávame ďalší odkaz na navigáciu, ktorú nakoniec nazývame „Navigation 'n' Search“ a ktorá po klepnutí slúži ako tlačidlo na odhalenie mobilnej navigácie. Prostredníctvom hraničných bodov mediálneho dopytu toto tlačidlo podľa potreby skrývame a zobrazujeme.
Prepínanie navigácie zvládneme väčšinou pomocou JavaScriptu. Trochu riskantné, pretože to odcudzuje ľudí na malých obrazovkách so zakázaným jazykom JavaScript - ale ja s tým iba idem. To číslo je také malé (menšie ako desktop bez JavaScriptu, čo je určite menej ako 1%), že budem len hlupák a budem s ním behať.
Všetko, čo skutočne robíme s JavaScriptom, je prepínanie názvu triedy. To, čo by som rád považoval za štátom riadený vývoj CSS. Celá kontrola nad tým, čo sa zobrazuje a kedy a ako sa zaobchádza s CSS. JavaScript iba nastaví triedu na vyhlásenie aktuálneho stavu.
Trávime kopu času drotaním pridávaním „papierových“ CSS, správnym fungovaním a následným umiestňovaním hľadania do medzery, ktorú vytvoríme nad hlavným obsahom pomocou nejakej výplne.
Nakoniec je upravená veľkosť a pozícia, aby sa zmestili ešte krajšie, a pridalo sa malé tlačidlo na zatvorenie. Idem tam a späť v mojej hlave a poskytujem používateľské rozhranie na prepínanie stavov v podobných veciach. Jednou rukou, keď teraz používateľ odhalil navigáciu, prečo by ju musel zavrieť? Už to videli. Ak ho nechcú použiť, môžu okolo neho len švihnúť. Na druhej strane mi príde dosť nepríjemné, keď nemôžem prepínať stavy ako je tento v iných aplikáciách (z nejakého dôvodu), takže som naklonený poskytnúť mechanizmus, ako to urobiť.
