Mamy dobry początek w projektowaniu responsywnym. Menu przy najmniejszych rozmiarach ekranu jest podzielone na siatkę 2 × 4. Ładnie mieści się na ekranie, ale między tym a brandingiem zajmuje bardzo dużo miejsca. Otwieramy go na symulatorze iOS i widzimy, że w niektórych przypadkach nie można w ogóle zobaczyć żadnej rzeczywistej zawartości.
Przyjrzymy się kilku zasobom na temat obsługi wzorców nawigacji, takich jak artykuł Brada Frosta Responsive Navigation Patterns i Jason Weaver's Off Canvas. Patrzymy również na fajne demo na MDN o nazwie Paperfold.
Dodajemy dodatkowe łącze do nawigacji, którą ostatecznie nazywamy „Nawigacją i wyszukiwaniem”, które po dotknięciu będzie działać jak przycisk wyświetlający nawigację mobilną. Za pomocą punktów przerwania zapytań o media ukrywamy i pokazujemy ten przycisk w razie potrzeby.
Przełączanie nawigacji będziemy obsługiwać głównie w JavaScript. Trochę ryzykowne, ponieważ odstrasza użytkowników na małych ekranach z wyłączoną obsługą JavaScript - ale po prostu się z tym zgadzam. Ta liczba jest tak mała (mniejsza niż komputer stacjonarny bez JavaScript, który z pewnością jest mniejszy niż 1%), że będę po prostu palantem i biegać z nią.
Wszystko, co tak naprawdę robimy w JavaScript, to przełączanie nazwy klasy. To właśnie lubię myśleć jako o rozwoju CSS sterowanym przez stan. Pełna kontrola nad tym, co jest wyświetlane oraz kiedy i jak jest obsługiwana przez CSS. JavaScript po prostu ustawia klasę, aby zadeklarować bieżący stan.
Spędzamy sporo czasu, majstrując przy dodawaniu CSS „papierowej” składanki, poprawiając jego działanie, a następnie umieszczając wyszukiwanie w luce, którą tworzymy nad główną treścią za pomocą dopełnienia.
Ostatecznie rozmiar i pozycja są dostosowywane, aby pasowały jeszcze ładniej, i dodano mały przycisk zamykania. Wracam do głowy, zapewniając interfejs użytkownika do przełączania stanów na takie rzeczy. Z jednej strony, skoro użytkownik ujawnił nawigację, dlaczego miałby ją zamykać? Już to widzieli. Jeśli nie chcą go używać, mogą po prostu przejść obok niego. Z drugiej strony uważam to za trochę irytujące, gdy nie mogę przełączać stanów takich jak ten w innych aplikacjach (z jakiegoś powodu), więc jestem skłonny zapewnić mechanizm, aby to zrobić.
