Имаме добро начало на отзивчивия дизайн. Менюто при най-малките размери на екрана се разделя на мрежа 2 × 4. Пасва добре на екрана, но между това и брандирането заема страшно много място. Отваряме го на симулатора на iOS и виждаме, че в някои случаи изобщо не можете да видите действително съдържание.
Ще разгледаме няколко ресурси за това как да се справим с навигационните модели, като статията на Брад Фрост Responsive Navigation Patterns и Off Canvas на Джейсън Уивър. Също така разглеждаме страхотна демонстрация на MDN, наречена Paperfold.
Добавяме допълнителна връзка към навигацията, която в крайна сметка наричаме „Navigation 'n' Search”, която ще действа като бутон за разкриване на мобилната навигация при докосване. Чрез точките за прекъсване на медийните заявки ние скриваме и показваме този бутон при необходимост.
Превключването на навигацията ще се справя най-вече с JavaScript. Малко рисковано, тъй като отчуждава тези на малките екрани с деактивиран JavaScript - но аз просто отивам с него. Този брой е толкова малък (по-малък от работния плот без JavaScript, което със сигурност е по-малко от 1%), че просто ще бъда глупак и ще тичам с него.
Всичко, което наистина правим с JavaScript, е да превключваме име на клас. Това, което обичам да мисля като държавно развитие на CSS. Целият контрол върху това, което се показва и кога и как се обработва с CSS. JavaScript просто задава клас за деклариране на текущото състояние.
Прекарваме куп време, докато се занимаваме с добавяне на CSS в „хартиена кутия“, караме го да работи правилно и след това поставяме търсенето в празнина, която създаваме над основното съдържание, чрез някои подплънки.
В крайна сметка размерът и позицията са променени, за да се поберат още по-добре и е добавен малък бутон за затваряне. Въртя се напред-назад в главата си, като предоставям потребителски интерфейс за превключване на състояния по подобни неща. От една страна, сега, след като потребителят разкри навигацията, защо ще трябва да я затваря? Вече са го виждали. Ако не искат да го използват, могат просто да го прескочат. От друга страна, ми е досадно, когато не мога да превключвам състояния като това в други приложения (по някаква причина), така че съм склонен да осигуря механизъм за това.
