Главная / Верстка сайта / Изучаем шаблоны отзывчивого навигационного меню

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

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

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

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

Шаблоны

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

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

Вот эти три модели:

  • Вверх ориентированного меню — позволяет занять под панель меню минимум пространства и использует 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.

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

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

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

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

Перевод статьи «Examining Responsive Navigation Patterns» был подготовлен дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Создание цветной рамки вокруг текста с помощью HTML и CSS

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...