Abbiamo un buon inizio con il responsive design. Il menu nelle dimensioni dello schermo più piccole si suddivide in una griglia 2 × 4. Si adatta bene allo schermo, ma tra questo e il marchio occupa molto spazio. Lo apriamo sul simulatore iOS e vediamo che in alcuni casi non è possibile visualizzare alcun contenuto effettivo.
Diamo un'occhiata ad alcune risorse su come gestire i modelli di navigazione, come l'articolo di Brad Frost Modelli di navigazione reattiva e Off Canvas di Jason Weaver. Guardiamo anche una fantastica demo su MDN chiamata Paperfold.
Aggiungiamo un collegamento aggiuntivo alla navigazione che alla fine chiamiamo "Navigazione e ricerca" che fungerà da pulsante per rivelare la navigazione mobile quando viene toccato. Tramite i punti di interruzione delle media query, nascondiamo e mostriamo questo pulsante secondo necessità.
La commutazione della navigazione verrà gestita principalmente con JavaScript. Un po 'rischioso in quanto aliena quelli su schermi piccoli con JavaScript disabilitato, ma ci sto solo andando. Quel numero è così piccolo (più piccolo del desktop senza JavaScript, che è certamente inferiore all'1%) che sarò un idiota e lo seguirò.
Tutto ciò che realmente facciamo con JavaScript è attivare o disattivare il nome di una classe. Questo è ciò che mi piace pensare come sviluppo CSS guidato dallo stato. Tutto il controllo di ciò che viene mostrato e quando e come viene gestito con i CSS. JavaScript imposta solo una classe per dichiarare lo stato corrente.
Passiamo un sacco di tempo ad armeggiare aggiungendo il CSS "paperfold", facendolo funzionare correttamente, e quindi inserendo la ricerca in uno spazio che creiamo sopra il contenuto principale attraverso un po 'di riempimento.
Infine, il dimensionamento e la posizione vengono modificati per adattarsi ancora meglio e viene aggiunto un piccolo pulsante di chiusura. Vado avanti e indietro nella mia testa fornendo l'interfaccia utente per alternare stati su cose come questa. Da un lato, ora che l'utente ha rivelato la navigazione, perché dovrebbe chiuderla? L'hanno già visto. Se non vogliono usarlo, possono semplicemente sfogliarlo. D'altra parte, trovo un po 'fastidioso quando non riesco a commutare stati come questo su altre app (per qualche motivo), quindi sono propenso a fornire un meccanismo per farlo.
