У нас хорошее начало адаптивного дизайна. Меню на самых маленьких экранах разбивается на сетку 2 × 4. Он хорошо помещается на экране, но между этим и брендингом занимает ужасно много места. Мы открываем его в симуляторе iOS и видим, что в некоторых случаях вы вообще не видите никакого реального контента.
Мы рассмотрим несколько ресурсов о том, как обрабатывать шаблоны навигации, например, статью Брэда Фроста «Адаптивные шаблоны навигации» и статью Джейсона Уивера Off Canvas. Мы также смотрим на классную демонстрацию на MDN под названием Paperfold.
Мы добавляем дополнительную ссылку к навигации, которую мы в конечном итоге называем «Navigation 'n' Search», которая будет действовать как кнопка для отображения мобильной навигации при нажатии. С помощью точек останова медиа-запроса мы скрываем и показываем эту кнопку по мере необходимости.
Переключение навигации мы в основном будем обрабатывать с помощью JavaScript. Немного рискованно, поскольку это отталкивает тех, кто работает на маленьких экранах с отключенным JavaScript, но я просто с этим согласен. Это число настолько мало (меньше, чем для настольных компьютеров без JavaScript, что, безусловно, составляет менее 1%), что я просто буду придурком и побегу с ним.
Все, что мы действительно делаем с JavaScript, - это переключаем имя класса. Это то, что мне нравится думать о разработке CSS, управляемой состоянием. Весь контроль над тем, что, когда и как отображается, осуществляется с помощью CSS. JavaScript просто устанавливает класс для объявления текущего состояния.
Мы тратим кучу времени на то, чтобы добавить CSS-код «paperfold», чтобы он работал правильно, а затем помещаем поиск в промежуток, который мы создаем над основным контентом, с помощью некоторого отступа.
В конечном итоге размер и положение настраиваются, чтобы они подходили еще лучше, и добавляется небольшая кнопка закрытия. Я мысленно прокручиваю взад и вперед, предлагая пользовательский интерфейс для переключения состояний таких вещей. С одной стороны, теперь, когда пользователь открыл навигацию, зачем им закрывать ее? Они это уже видели. Если они не хотят его использовать, они могут просто пролистать его. С другой стороны, меня раздражает, когда я не могу переключать такие состояния в других приложениях (по какой-то причине), поэтому я склонен предоставить механизм для этого.