We hebben een goede start met het responsieve ontwerp. Het menu bij de kleinste schermformaten valt uiteen in een 2 × 4 raster. Het past mooi op het scherm, maar tussen dat en de branding neemt het ontzettend veel ruimte in beslag. We openen het op de iOS-simulator en zien dat je in sommige gevallen helemaal geen daadwerkelijke inhoud kunt zien.
We bekijken enkele bronnen over het omgaan met navigatiepatronen, zoals Brad Frost's artikel Responsive Navigation Patterns en Jason Weaver's Off Canvas. We bekijken ook een coole demo op MDN genaamd Paperfold.
We voegen een extra link toe aan de navigatie die we uiteindelijk "Navigatie 'n' Zoeken" noemen en die zal fungeren als de knop om de mobiele navigatie weer te geven wanneer erop wordt getikt. Via onderbrekingspunten voor mediaquery's verbergen en tonen we deze knop indien nodig.
Het omschakelen van de navigatie zullen we meestal afhandelen met JavaScript. Een beetje riskant omdat het diegenen op kleine schermen met JavaScript uitgeschakeld vervreemdt - maar ik ga er gewoon mee door. Dat aantal is zo klein (kleiner dan desktop zonder JavaScript, wat zeker minder is dan 1%) dat ik er gewoon een klootzak mee ga doen.
Alles wat we echt met JavaScript doen, is een klassenaam wijzigen. Dat is wat ik graag beschouw als state-driven CSS-ontwikkeling. Alle controle over wat wordt getoond en wanneer en hoe wordt afgehandeld met CSS. JavaScript stelt gewoon een klasse in om de huidige status aan te geven.
We besteden een hoop tijd aan het sleutelen aan het toevoegen van de "paperfold" CSS, om het correct te laten werken, en vervolgens het plaatsen van de zoekopdracht in een opening die we creëren boven de hoofdinhoud door middel van wat opvulling.
Uiteindelijk zijn de maatvoering en positie aangepast om nog mooier te passen en is er een kleine sluitknop toegevoegd. Ik ga heen en weer in mijn hoofd met het verstrekken van een gebruikersinterface voor het wisselen van staten op dit soort dingen. Enerzijds, nu de gebruiker de navigatie heeft onthuld, waarom zouden ze deze dan moeten sluiten? Ze hebben het al gezien. Als ze het niet willen gebruiken, kunnen ze er gewoon langs bladeren. Aan de andere kant vind ik het een beetje vervelend als ik dit soort toestanden niet kan wisselen in andere apps (om de een of andere reden), dus ik ben geneigd een mechanisme te bieden om dit te doen.
