Содержание
Выяснить, как лучше всего оптимизировать навигацию для мобильных устройств, непросто. Наше сообщество разработало массу различных подходов к решению этой проблемы, каждый из которых имеет свои плюсы и минусы.
В прошлом я часто выступал за преобразование традиционной навигации на основе списков в Выбрать для мобильных устройств (см. пример ниже). Это простая концепция, которую легко реализовать, и мне нравится элегантность подхода, но тот факт, что вам нужно полагаться на JavaScript, чтобы сделать его пригодным для использования, меня никогда не устраивал. Будучи ярым сторонником прогрессивного улучшения, я знал, что должен быть лучший способ.
Я всегда был очарован раскрывающимися списками на чистом CSS, но они традиционно полагались на : hover. А наведение, как вы знаете, не имеет отношения к сенсорным сценариям, так что это казалось тупиком. Но тут меня осенило: :цель был ответ на мои молитвы.
Как вы, наверное, знаете, селектор целевого псевдокласса (:цель) позволяет применять стили к элементам, указанным в идентификаторе фрагмента URL-адреса. Например:
http: //website.tld/my-page/#content
В этом URL-адресе идентификатором фрагмента является «контент», который заставит браузер прокручивать страницу, чтобы отобразить элемент с я бы «содержания» в поле зрения. Очень просто. Затем мы можем применить стили к этому элементу, когда он нацелен, используя :цель:
: target {background: # F6FD86;}
Когда Николс Колледж обратился в мою компанию с просьбой изменить дизайн микросайта для будущих студентов, проект предоставил прекрасную возможность проверить мою теорию о :цель.
Дизайн
На самом деле микросайт состоит всего из двух страниц - формы для сбора информации о потенциальном студенте и страницы с благодарностью, которая собирает релевантную информацию о программах Николс-колледжа на основе ее ответов, - но он включает множество навигационных ссылок, которые помогают ей делать такие вещи, как расписание визит, начать процесс подачи заявления или узнать, как добраться до школы. В дополнение к этим важным элементам навигации на сайте также есть набор навигационных ссылок, которые обеспечивают доступ к большему количеству того, что я бы назвал «изюминкой» школы.
Было много манипуляций, но мы начали с контента, естественно, организовав страницу так, чтобы пользователи имели немедленный доступ к материалам, которые они на самом деле должны были прочитать и / или использовать, прежде чем показывать им какую-либо навигацию:
- Баннер сайта
- Содержание
- Призывы к действию
- Контактные механизмы
- Ссылки на определенные школьные страницы
- Социальные сети
- Поиск
- Авторские права и др.
Этот подход идеально вписывается в мантру Люка Вроблевски «сначала мобильные» и идею представления контента заранее, а затем позволяя пользователю двигаться дальше. Этот подход, ориентированный на контент, привел к созданию нашего базового макета без мультимедийных запросов, предназначенного для обычных телефонов.
Как мы все прекрасно понимаем, на устройствах с маленькими экранами недвижимость стоит дорого, поэтому мы постоянно искали возможности упростить работу для наших пользователей. Поскольку смартфоны, как правило, имеют лучшую поддержку CSS, чем функциональные телефоны, мы решили спрятать менее важные ссылки за значком меню, открывая их только при нажатии на них, что очень похоже на старые раскрывающиеся списки CSS. Это распространенный шаблон дизайна в мобильном Интернете, но все реализации, которые я видел до сих пор, требовали JavaScript. Я хотел посмотреть, смогу ли я создать эквивалентный опыт, используя только CSS (и не прибегая к хакам, связанным со скрытым элементом управления формой).
Я пройдусь по CSS, но сначала должен отметить, что следующие стили были помещены в таблицу стилей, предназначенную для устройств средней ширины, начиная с 19,375ems. Большинство этих правил было заключено в дополнительный медиа-запрос внутри этой таблицы стилей, что ограничивало их применение шириной менее 46 мкм (что было достаточно широким, чтобы поддерживать альтернативный макет для этой конкретной навигации). Этот метод изоляции гарантирует, что правила не «перетекут» без надобности в альтернативные макеты.
link rel = "stylesheet" href = "/ c / medium.css" media = "screen and (min-width: 19.375em)" /> @ media screen и (max-width: 46em) {/ * Здесь приведены правила * /}
Давай копаться
Первым шагом было применение стилей, чтобы переместить навигацию в верхнюю часть страницы:
#nav {маржа: 0; позиция: абсолютная; верх: 0; справа: 0; слева: 0; z-индекс: 1000;}
Примечание. Я удалил ненужные стили, чтобы вы могли сосредоточиться на важных деталях.
Затем я настроил ссылки так, чтобы они казались свернутыми, за исключением случая, когда текущая цель была навигацией:
#nav a {border-bottom-width: 0; переполнение: скрыто; высота: 0; высота строки: 0; padding: 0 1em;} # nav: target a {border-bottom-width: 1px; высота строки: 3em; height: 3em;}
Имея эти правила, я мог бы вручную манипулировать URL-адресом, чтобы открывать и закрывать меню, но это не является разумным требованием в реальном сценарии. Мне нужно было создать ссылку, которая будет нацелена на список навигации, но я хотел сделать это, не добавляя лишнего мусора в документ. В конце концов, нет никакого смысла в том, чтобы элемент был на странице, если он полезен только в одном сценарии. К счастью, старый резервный сервер идеально подходил для этой задачи.
«Перейти к спасению»
На заре Интернета мы часто использовали ссылки «перейти к содержанию» как средство, позволяющее нашим пользователям пропустить навигацию по сайту и перейти к сути страницы. При подходе, ориентированном на контент, ссылка «перейти к навигации» одинаково полезна для предоставления пользователям прямого доступа к навигации без необходимости размещать все это в верхней части страницы. Самое замечательное в ссылках с «переходом к» заключается в том, что они работают, манипулируя идентификатором фрагмента URL-адреса и, таким образом, позволяют нам использовать :цель. Вуаля!
Во-первых, я добавил ссылку «перейти к» вверху страницы:
header> - Логотип -> a id = "jump" href = "# nav"> Навигация по сайту / a> / header>
Затем я придал ему стиль, похожий на маленькую кнопку меню в правом верхнем углу нашего дизайна:
#jump {background: # 000 url (/c/i/nav.png) 50% 50% без повтора; граница: 1px solid # 8b8b8b; ширина границы: 0 0 1px 1px; курсор: указатель; дисплей: блок; отступ: 0; высота: 53 пикс; ширина: 53 пикс; текстовый отступ: -999em; позиция: абсолютная; справа: 0; вверху: 0;}
Стоит отметить, что эта ссылка полезна даже для обычных телефонов, поскольку она позволяет им переходить прямо к навигации. (Вы можете увидеть этот простой подход, используемый Contents Magazine и Bagcheck. Чтобы узнать о плюсах и минусах, обратитесь к обзору схем мобильной навигации Брэда Фроста.)
Когда кнопка переключения была на месте, у меня был отличный способ заставить навигацию появиться, но не было способа заставить ее снова исчезнуть.
Поразмыслив над этой проблемой, меня осенило смехотворно простое решение: включить ссылку «вернуться к содержанию» в конце списка навигации. Щелчок по этой ссылке сделает #nav больше не цель, и список рухнет.
ul id = "nav" tabindex = "0">! - Элементы навигации -> li id = "back"> a href = "# top"> К началу / a> / li> / ul>
Достаточно просто, но это решило только часть проблемы. Мы не хотим, чтобы пользователю приходилось рыться в списке, чтобы найти ссылку, позволяющую закрыть раскрывающийся список; вместо этого мы хотим, чтобы он вел себя так, как ожидал бы пользователь: касание или щелчок за пределами раскрывающейся области должно снова сворачивать навигацию. К счастью, с небольшим z-индекс жонглирование и легкое умное позиционирование позволяет разместить ссылку под другими элементами навигации и расширить ее, чтобы заполнить оставшуюся часть экрана (незаметно, конечно). Вот примеры соответствующих стилевых правил:
#jump {/ * убедитесь, что кнопка меню находится сверху * / z-index: 1001;} # nav {/ * навигация находится за кнопкой меню * / z-index: 1000;} # nav: target {/ * если он не показывает * / z-index: 1001;} # nav: target a {/ * заставляет навигационные ссылки располагаться на более высоком уровне * / position: relative; z-index: 1;} # back {/ * установить контекст позиционирования для более близкого * / position: relative; } #back a {/ * превратить ссылку в призрак * / background: transparent; граница: 0; текстовый отступ: -999em; / * заставляем его заполнять экран * / position: absolute; верх: -101em; внизу: -101em; слева: 0; справа: 0; / * убедитесь, что он находится за другими ссылками * / z-index: 0;}
После этого меню стало полностью функциональным. Просто нужно было немного доработать.
Уборка
Чтобы улучшить внешний вид интерфейса, я решил добавить простой переход к ссылкам, позволяющий им расти вертикально, когда навигатор нацелен:
#nav: target a {-moz-transition: высота 0,25 с, высота строки 0,25 с; -ms-transition: высота 0,25 с, высота строки 0,25 с; -o-transition: высота 0,25 с, высота строки 0,25 с; -webkit-transition: высота 0,25 с, высота строки 0,25 с; переход: высота 0,25 с, высота строки 0,25 с;}
С добавлением этого небольшого перехода навигация работала прекрасно, но я все еще немного беспокоился о возможном размытии стиля. Конечно, если браузер поддерживает медиа-запросы, он, вероятно, поддерживает :цель, но на всякий случай я решил предварять каждое соответствующее правило стиля фразой тело: не (: цель) (который будет сопоставлен только в том случае, если браузер поддерживает выбор цели). Вот пример:
body: not (: target) #nav {/ * эти стили применяются только в том случае, если: target и: not понятны (и, конечно, тело не является таргетингом) * /}
И вот оно: простое раскрывающееся меню на основе CSS с постепенным расширением, которое прекрасно работает как часть адаптивного дизайна. Я надеюсь, что вы найдете этот подход таким же удобным, как и я.
