Изучаем шаблоны отзывчивого навигационного меню

Поскольку веб-дизайнеры создают все больше веб-сайтов с адаптивным дизайном, то постоянно возникают шаблоны глобальной навигации. Это первая статья из серии, поясняющей, как работают некоторые из данных моделей. Данная статья охватывает три схемы отзывчивых навигационных шаблонов: топ — ориентированного меню, меню приоритета и меню выбора.

Одной из специфических проблем каждого веб-сайта, имеющего отзывчивый дизайн, будет реализация панели глобальной навигации. Как сделать ее такой, чтобы она запросто помещалась на широком экране и отлично читалась на маленьком? Решения появились благодаря множеству экспериментов, проведенных веб-дизайнерами.

Этот материал открывает серию статей, которая рассматривает ряд таких шаблонов. Мы рассмотрим в них как можно легко самостоятельно расширять и дорабатывать шаблоны, не опираясь на технологию «копировать — вставить код». Данная статья включает обзор трех шаблонов.

Шаблоны

Основная проблема отзывчивой навигации — пространство. На широких экранах у нас есть много свободного горизонтального пространства, но на мобильных устройствах все наоборот. Мы могли бы преобразовать пространство по горизонтали, чтобы использовать вертикальное пространство на данных небольших устройствах, но тогда содержимое сползает вниз по странице.

Модели, которые мы рассмотрим, смогут расположить панель навигации в доступном для посетителя месте даже в ограниченном по вертикали пространстве.

Вот данные три модели:

  • Вверх ориентированного меню — может занять под панель меню минимум пространства и использует css – стили, чтобы адаптировать панель навигации;
  • Меню приоритета — выводит и показывает панель меню, основываясь на доступном экранном пространстве;
  • Меню выбора — преобразует панель меню в выпадающий список, содержащий пункты меню, когда места на экране недостаточно.

Каждый из данных шаблонов решает проблему пространства разными методами.

Демонстрационный режим показывает все три шаблона, а также разные вариации меню выбора. Ниже мы рассмотрим все данные шаблоны с примерами кода:

Изучаем шаблоны отзывчивого навигационного меню

Шаблон вверх ориентированного меню

Возможно, это самый востребованный и часто используемый шаблон панели навигации. Изменения, вносимые в панель навигации, в зависимости от ширины экрана, минимальны. Обычно все, что надо сделать, чтобы шаблон заработал, внести пару правок в css – стили.

Вводное слово: В просмотр — режиме используется простой заголовок. Он содержит логотип и пару ссылок, составляющих нашу глобальную навигацию. Наша цель – при нехватке пространства передвинуть панель вниз, а логотип сдвинуть вправо.

Шаг 1: HTML

Разметка проста. Внутри элемента заголовка html5 располагается логотип и неупорядоченный список ссылок нашей навигации. Контейнер <DIV> используется, чтобы позволить фону заголовка занимать все пространство от края до края, сохраняя при этом его содержимое в центре при максимальной ширине страницы.

Одна вещь, которая могла вас озадачить – для чего используются неразрывные пробелы в надписях меню. Когда размеры браузера меняются, то пункты меню могут начать занимать две строки, вместо одной. Неразрывные пробелы обеспечивают нашему меню гарантированное размещение в одну линию, избегая переноса строк:

<header> <div class="container"> <img class="logo" src="images/logo.png" width="252" height="46" /> <nav> <ul id="demo-nav"> <li><a href="">Back to Post</a></li> <li class="current"><a href="">Top-Nav</a></li>        <li><a href="">Priority</a></li>        <li><a href="">Select&nbsp;Menu</a></li>        <li><a href="">Select&nbsp;Menu&nbsp;JS</a></li>      </ul>    </nav>  </div></header>

Шаг 2: CSS – стили по умолчанию

Программный код CSS по умолчанию для заголовка и логотипа также довольно прост. Сам заголовок имеет в себя пару параметров цвета и отступ от нижнего края. На маленьких экранах навигационная панель будет располагаться под логотипом, и оба данных элемента будут находиться по центру. Логотипу я добавил отступа сверху и снизу:

header {  color:#eee;  background: #2b2726;  padding-bottom: 1em;  text-align: center;}.logo {  margin: 1.25em 0;  width: 200px;}

CSS для навигационной панели прост. Если вы когда-либо писали программный код для основного меню, то стили должны показаться вам знакомыми. Одна вещь, которую вы не увидите в этом примере, но которая часто встречается в меню – плавающие ссылки. Поскольку мы собираемся в полном объеме отцентрировать меню по умолчанию, то используем такой код:

#demo-nav {  margin: 0;  padding: 0;  list-style: none;  overflow: hidden;}#demo-nav li {  display: inline;}#demo-nav a {  color:#fff;  padding: 0.75em;  text-decoration: none;  line-height: 2.5;}#demo-nav a:hover {  text-decoration: underline;}

Ключом в данной части css – кода являются расстояния между ссылками. Если будет недостаточно места для меню, то отдельные ссылки будет трудно нажать. Если меню станет занимать больше места – оно расползется на пару строк. Я нашел компромисс, при котором между ссылками остается максимум возможного места, но занимают они только две строки.

С учетом указанных выше стилей панель навигации должна выглядеть так, как показано на картинке ниже. Я сделал скриншот, когда ширина окна браузера составляла 320 пикселей:

Изучаем шаблоны отзывчивого навигационного меню Шаг 3: Медиа — запросы

Первая пара медиа – запросов предназначена для параметра расстояния между ссылками. У нас недостаточно места, чтобы двигать навигационное меню вверх и вправо, но мы можем настраивать расстояние между самими ссылками. Тут нет правильных и неправильных значений. Я поэкспериментировал с шириной браузера и сделал разные параметра для различных разрешений.

При разрешении 42.5em(680 пикселей) у нас достаточно места, чтобы уместить все ссылки в одну строку, поэтому я сократил левый и правый отступы так, чтобы поместить их все в одну строку:

@media screen and(min-width: 30em) {  #demo-nav a {padding: 0.75em 1.75em;}}@media screen and(min-width: 42.5em) {  #demo-nav a {padding: 0.75em 1.1em;}}

Изучаем шаблоны отзывчивого навигационного меню
Когда ширина страницы становится 52.5 em(840 пикселей), появляется достаточно места, чтобы поместить меню справа от логотипа. Для начала мы «повесим» логотип в левой части при помощи свойства float. Отступы в нижней части заголовка мы убираем, они нам больше не понадобятся.

Панель навигации, при помощи свойства float, мы «цепляем» к правой части контейнера и увеличиваем левый и правый отступы у ссылок, чтобы логотип и меню расположилось в одном пространстве. Поскольку мы расположили все справа при помощи float, я убрал отступ у крайней правой ссылки. Ещё одно изменение – отображаем ссылки на уровне блочных элементов, чтобы увеличить «кликабельную» область и чтобы свойство float работало корректно:

@media screen and(min-width: 52.5em) {.logo {float: left;}  header {padding-bottom: 0;}  #demo-nav {float: right;}  #demo-nav a {padding: 1.25em 0.75em; display: block; float: left}  #demo-nav li:last-child a {padding-right: 0;}}

Изучаем шаблоны отзывчивого навигационного меню
Два последних изменения были внесены исключительно для регулировки расстояний между ссылками:

@media screen and(min-width: 64em) {  #demo-nav a {padding: 1.5em;}}@media screen and(min-width: 75em) {  #demo-nav a {padding: 1em 2.25em; line-height: 3em}}

Советы

Это довольно простая схема, потому она часто используется. В зависимости от дизайна, возможно, вам не придется ничего менять, за исключением нескольких строчек.

Лучше всего этот шаблон работает, когда число пунктов меню ограничено. Я использовал пять пунктов. Вероятно, шесть будут работать точно также. А четыре ещё лучше.

Одна важная вещь, которую следует уяснить касательно этого шаблона — оставляйте достаточно места вокруг ссылок на узких экранах, чтобы каждая гиперссылка была доступна для нажатия. Помните, что в телефоне у вас не будет мыши. Вы будете использовать пальцы, которые не так точны.

Другой момент. Имейте в виду, что ссылки будут стремиться выйти за пределы высоты линии при некоторых значениях ширины страницы. Я использовал неразрывный пробел, чтобы избежать этого, но это не идеальное решение:

Изучаем шаблоны отзывчивого навигационного меню

Шаблон приоритета

Структура вверх ориентированного меню отлично подходит в случаях, когда необходимо отобразить всего пару пунктов. Иногда вы не можете без труда сократить число пунктов меню до четырех или пяти, и тогда этот шаблон не подходит, так как потребуется слишком много места по вертикали на самых маленьких экранах.

В тех случаях, когда вы планируете разместить больше ссылок, чем умещается в отведенное им место на экране, вероятно, некоторые из них будут более важными, чем остальные. И в этом случае может пригодиться шаблон приоритета. Идея состоит в том, чтобы установить через классы пунктов меню.

На широких экранах показываются все ссылки. Как только ширина страницы становится меньше допустимого значения, ссылки с наименьшим приоритетом скрываются за ссылку «Дополнительно«. Когда окно становится ещё меньше – скрываются ссылки следующего уровня. И на самом маленьком экране вы используете минимум вертикального пространства, отображая только ссылку «Дополнительно».

Введение: И снова для демонстрации мы используем простой заголовок. На этот раз он содержит пару ссылок. Мы будем выводить навигацию под заголовком все время.

У нас есть 2 задачи, которые мы должны решить:

  • Показать и скрыть некоторые ссылки по умолчанию;
  • Показать и скрыть некоторые ссылки по запросу.

Шаг 1: HTML

Код html разметки схож с кодом предыдущего типа меню. Разница в наличии ссылок «дополнительно» и «скрыть«, которые будут использоваться для выведения или скрытия пунктов меню. Также включены классы приоритетов пунктов(alpha, beta, gamma), которые присвоены каждому пункту, и классы «отобразить»(show-more) и «скрыть»(show-less):

<header>  <div class="container">    <img class="logo" src="images/logo.png" width="252" height="46" />    <nav>      <ul id="demo-nav">        <li class="alpha"><a href="">Back to Post</a></li>        <li class="alpha"><a href="">Top-Nav</a></li>        <li class="current alpha"><a href="">Priority</a></li>        <li class="alpha"><a href="">Select Menu</a></li>        <li class="beta"><a href="">Select Menu JS</a></li>        <li class="beta"><a href="">Beta Link</a></li>        <li class="gamma"><a href="">Gamma Link</a></li>        <li class="gamma"><a href="">Gamma Link</a></li>        <li class="show-more"><a href="#more">More</a></li>        <li class="show-less"><a href="#">Less</a></li>      </ul>    </nav>  </div></header>

Изучаем шаблоны отзывчивого навигационного меню Шаг 2: CSS — стили

Стили, как и разметка, похожи на предыдущий шаблон меню, так что не будем повторяться. Исключением будет только то, что мы скрываем и отображаем ссылки. Мы разобьем данные действия на две части.

Во-первых, мы будем выводить только alpha – ссылки и ссылку «Дополнительно» на самых маленьких экранах, так что остальным пунктам меню мы установим свойство display: none:

#demo-nav li.beta,#demo-nav li.gamma,#demo-nav li.show-less  {display: none;}

Во-вторых, нам надо показывать ссылки иного приоритета, а также менять местами ссылки «Дополнительно» и «Скрыть«, когда их нажимает посетитель. Чтобы сделать это, мы воспользуемся псевдо – селектором :target. Если вы не знакомы с данным селектором, его действия схожи с работой якоря.

Селектор :target срабатывает, когда хешкод в url – ссылке и id элемента одинаковы. Иными словами, если у вас есть гиперссылка domain.com#more, то селектор :target будет срабатывать, когда попадется какой – либо элемент с id=»more».

Возможно, вы заметили, что в приведенном выше HTML — коде ссылка «more» включает хэштег #more. Нажав на нее, мы будем перемещены на исходную страницу, в адрес которой добавлен хэш #more. А то, что не было показано выше, есть html – элемент на странице:

<html lang="en" id="more">

Нажатие на ссылку «Дополнительно» сможет достигнуть html – тега и всего, что он включает, при помощи псевдо класса :target. Мы можем выводить и скрывать ссылку «more» при помощи приведенного ниже кода:

:target #demo-nav li.beta,:target #demo-nav li.gamma,:target #demo-nav li.show-less  {display: inline;}:target #demo-nav li.show-more {  display: none;}

Когда происходит нажатие на ссылку «Скрыть» мы убираем хэштег и псевдо класс :target более не работает. Заметка: Когда я добавил id=»more» в html тег, любой вышестоящий элемент в модели DOM может работать. Так как должен быть объект, который включает все элементы, которые вы хотели бы выбрать:

Изучаем шаблоны отзывчивого навигационного меню Шаг 3: Медиа — запросы

Точно так же, как и в примере с вверх ориентированным меню, я сделаю пару медиа – запросов для расстановки отступов между элементами меню. Также я буду переключаться между свойствами float и center для логотипа и самой навигационной панели, чтобы меню была внизу логотипа.

Я не буду выводить весь программный код в руководстве, но вы можете легко увидеть его на демонстрационной странице. Вместо этого давайте сосредоточимся на выведении ссылок с более низким приоритетом, что довольно просто. Все, что необходимо, это выводить скрытые ссылки, когда под них будет появляться пространство. Первыми будем выводить бета – ссылки, далее – гамма:

@media screen and(min-width: 48em) {  #demo-nav li.beta {display: inline;}}@media screen and(min-width: 75em) {  #demo-nav li.gamma {display: inline;}  #demo-nav li.show-more,:target #demo-nav li.show-less  {display: none;}}

После того, как ссылки всех 3 уровней будут отображены, надобность показывать ссылки «Дополнительно» и «Скрыть» отпадает, так что данные ссылки мы в полном объеме отключаем:

Изучаем шаблоны отзывчивого навигационного меню

Подсказки

Из всех шаблонов данного урока, шаблон приоритетов наиболее редко используемый. Однако в некоторых случаях, это будет лучшим решением. Но оно имеет в себя пару недостатков. Псевдокласс :target не работает в IE8 и более ранних версиях. Можно без труда заменить :target решением на основе javascript( для работы в IE8).

Ещё одной, более значимой проблемой, будет переключение между ссылками «Дополнительно» и «Скрыть». В этом примере я поместил данные ссылки в конце, и, щелкая по одним ссылкам, иные должны выводиться в различных местах. Ссылки должны просто поменяться местами, но этого не происходит.

Можно поправить ситуацию, поместив данные ссылки первыми в списке или отображая их обе тогда, когда приоритетные ссылки скрыты, но это не самое стильное решение:

Изучаем шаблоны отзывчивого навигационного меню

Шаблон меню — выбора

Шаблон меню выбора – ещё один вариант решения проблемы выведения множества ссылок на экране с маленьким разрешением. Решение заключается в использовании выпадающего списка, который занимает совсем пространства. Минус такого решения в том, что все ссылки скрыты по умолчанию.

Иным недостатком будет необходимость использования программного кода в HTML, поскольку нет иного метода, чтобы сделать выпадающий список похожим на простой список и наоборот. А это означает, что вам необходимо держать в коде 2 вида меню и это может стать проблематичным в случае с большим числом ссылок. Я покажу вам измененную версию такого шаблона, где при помощи javascript мы создадим один из типов меню.

Введение: Мы начнем с двух html — меню, одно из которых будет в виде несортированного списка, такого же, как и в случае с вверх – ориентированным шаблоном, а иное – в виде выпадающего списка. Мы будем переключаться между данными двумя типами меню через медиа – запросы, в зависимости от наличия пространства. А также прибегнем к помощи javascript для перехода на другую страницу.

Шаг 1: HTML — разметка

Меню в виде несортированного списка не включает ничего нового. Новым в этом шаблоне будет добавление выпадающего списка и соответствующих настроек. Значение атрибута href мы переместим в значение атрибута value элемента option:

<div id="header">  <div class="container">    <img class="logo" src="images/logo.png" width="252" height="46" />    <nav>      <ul id="demo-nav">        <li><a href="">Back to Post</a></li>        <li><a href="top-nav.html">Top-Nav</a></li>        <li><a href="priority.html">Priority</a></li>        <li class="current"><a href="select.html">Select Menu</a></li>        <li><a href="select-js.html">Select Menu JS</a></li>      </ul>    </nav>    <select id="select-menu">      <option value="" selected="selected">Select</option>      <option value="">Back to Post</option>      <option value="top-nav.html">Top-Nav</option>      <option value="priority.html">Priority</option>      <option value="select.html">Select Menu</option>      <option value="select-js.html">Select Menu JS</option>  </select>  </div></div>

Шаг 2: CSS – стили

Стили остаются такими же, как и в предыдущем примере, потому я не буду повторять их. Для самых маленьких экранов я решил разместить выпадающий список под логотипом и поставить список по центру. Все что необходимо – предоставить списку 75% от ширины контейнера:

#select-menu {  width: 75%;}

Изучаем шаблоны отзывчивого навигационного меню Шаг 3: медиа — запросы

CSS для медиа – запросов прост. Поскольку меню в виде выпадающего списка не занимает много горизонтального пространства, мы можем подвинуть его(относительно логотипа) вверх и вправо:

@media screen and (min-width: 30em) {  .logo {float: left;}  #select-menu {    float: right;    clear: none;    width: 40%;    margin-top: 2.25em;  }  #header {padding-bottom: 0; text-align: left;}}

Самый главный момент в этом шаблоне – вывод несортированного списка и скрытие выпадающего списка, который мы можем реализовать при помощи свойства display для обоих типов меню.

С точки зрения доступности это хороший метод, так как навигация загрузится один раз, и не необходимо будет перегружать страницу повторно. Несортированный список мы отобразим справа, задействовав свойство float , и настроим отступ у ссылок:

@media screen and (min-width: 64em) {  #select-menu {display: none;}  #demo-nav {    display: block;    float: right;  }  #demo-nav a {padding: 1.25em 1.5em;}  #demo-nav li:last-child a {padding-right: 0;}}

Помимо того, что отражено в коде выше, я увеличил отступ у ссылок для широких экранов.

Шаг 4: Немного Javascript

Как я говорил ранее, в этом шаблоне мы используем JavaScript , который будет переносить нас на требуемые страницы при переходе из меню в виде выпадающего списка. Здесь я использовал jQuery (сразу же после включения библиотеки jQuery в заголовок документа):

$(function() {  $("div select").change(function() {    window.location = $(this).find("option:selected").val();  });});
Изучаем шаблоны отзывчивого навигационного меню

Меню выбора JS

Я упоминал выше, что можно использовать JavaScript для создания выпадающего меню, чтобы не поддерживать два набора одинаковых ссылок. И снова для создания такого типа меню я использую jQuery .

Сначала мы создадим сам выпадающий список и добавим его к элементу nav . Следующий блок кода создаёт элемент «Select«, который будет выводиться по умолчанию. В действительности он не нужен. Вместо него вы можете без труда отобразить первый элемент меню или же добавить программный код, который будет выводить тот пункт меню, соответствующая страница которого открыта в данный момент.

Последний блок кода берет все ссылки и текст из несортированного списка и добавляет его в элемент select :

$(function() {  // Создает основу выпадающего списка  $("<select id='select-menu'/>").appendTo("nav");  // Создает элемент "Select" по умолчанию  $("<option />", {    "selected"  :  "selected",    "value"        :  "",    "text"           :  "Select"  }).appendTo("nav select");  // Создает элементы выпадающего списка  $("nav a").each(function() {    var el = $(this);    $("<option />", {    "value"  :  el.attr("href"),    "text"     :  el.text()  }).appendTo("nav select");});

И наконец, мы завершаем написание кода jQuery , который нужен нам, чтобы убедиться, что переход совершен на нужную страницу:

$("nav select").change(function() {  window.location = $(this).find("option:selected").val();  });});

Итог

Мы рассмотрели три наиболее распространенных модели, используемые при разработке отзывчивой навигации. Шаблон топ – ориентированного меню лучше всего подходит в тех случаях, когда в наличии всего пару ссылок и не требуется множества стилистических вариаций.

Шаблон приоритета может использоваться в меню с большим числом ссылок. В его основе лежит процесс скрытия и выведения ссылок разного приоритета, используя псевдокласс :target .

Шаблон меню в виде выпадающего списка преобразует несортированный список в выпадающее меню, чтобы сэкономить пространство на странице.

Конечно же, это не все шаблоны. В следующих статьях мы продолжим их изучение!

Скачать рабочие материалы

Посмотреть просмотр

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *