Ми добре розпочали реагувати на дизайн. Меню з найменшими розмірами екрану розбивається на сітку 2 × 4. Він добре поміщається на екрані, але між цим та брендингом він займає надзвичайно багато місця. Ми відкриваємо його на симуляторі iOS і бачимо, що в деяких випадках ви взагалі не бачите жодного фактичного вмісту.
Ми ознайомимося з кількома ресурсами про те, як поводитись з навігаційними шаблонами, як-от стаття Бреда Мороза “Адаптивні навігаційні шаблони” та “Off Canvas” Джейсона Вівера. Ми також дивимося на круту демонстрацію MDN під назвою Paperfold.
Ми додаємо додаткове посилання до навігації, яку в кінцевому рахунку ми називаємо "Навігація в пошуку", яка буде виконувати роль кнопки для розкриття мобільної навігації при натисканні. Через межі запитів медіа-запитів ми приховуємо та показуємо цю кнопку за потреби.
Перемикання навігації ми здебільшого обробляємо за допомогою JavaScript. Трохи ризиковано, оскільки це відчужує тих, хто знаходиться на маленьких екранах з відключеним JavaScript, - але я просто з ним піду. Ця кількість настільки мала (менша за робочий стіл без JavaScript, що, безумовно, менше 1%), що я просто буду шаленим і бігаю з ним.
Все, що ми дійсно робимо з JavaScript, - це перемикання імені класу. Це те, що я люблю вважати державною розробкою CSS. Весь контроль над тим, що відображається, коли і як обробляється за допомогою CSS. JavaScript просто встановлює клас для оголошення поточного стану.
Ми витрачаємо купу часу, базікаючи, додаючи CSS в «паперовому складі», примушуючи його працювати правильно, а потім розміщуючи пошук у прогалині, яку ми створюємо, над основним вмістом за допомогою деяких відступів.
Зрештою, розмір і положення змінено, щоб підійти ще приємніше, і додана маленька кнопка закриття. Я ходжу туди-сюди в голові, надаючи інтерфейс для перемикання станів на подібні речі. З одного боку, тепер, коли користувач розкрив навігацію, навіщо їм закривати її? Вони це вже бачили. Якщо вони не хочуть ним користуватися, вони можуть просто пройти повз нього. З іншого боку, мене це дратує, коли я не можу перемикати подібні стани в інших програмах (з якихось причин), тому я схильний надати механізм для цього.
