—»     —»   Разработка адаптивного навигационного меню
  Раздел: Меню и Навигация, Руководства   Нет комментариев  

Разработка адаптивного навигационного меню



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

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

Разработка адаптивного навигационного меню

Над чем мы работаем

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

Демо: кликните для того, чтобы увидеть меню в действии.

Разработка адаптивного навигационного меню

HTML-код

Давайте сразу же приступим к разработке проекта. Мы точно знаем, что вы жаждите получить превосходный результат.

Сперва нам нужно решить кое-какие вопросы относительно верстки. Так как это у нас навигационное меню, то лучше будет расположить его в HTML5-элементе «nav».

<nav>
</nav>

Верите или нет, этот небольшой отрывок кода вскружил нам голову, кода пришло время тестирования. По какой-то причине, примененные нами стили не работали в IE 6-8! После славных 10 минут «ковыряний» до нас дошло, что здесь ведь используются элементы HTML5, которые не поддерживаются в IE вплоть до 9 версии.

К счастью, это легко исправить с помощью известной сегодня html5shiv (нужно поместить код в документ в рамках тэга head).

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Добавляем список

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

<nav>
<ul>
<li><a href="#">PixelsDaily</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Podcast</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Добавляем под-тэги

Для того чтобы наше меню было немного более интересным и доступным, давайте включим еще одну строку текста под основным заголовком каждого пункта меню. Для реализации этого существует множество различных методов, поэтому вы можете выбрать нечто отличное от того, что выбрали мы. Мы вставили тэг break, и добавили элемент small для второй строки. Вторая строка будет меньше, что также способствует привлекательности отображения, а также поможет нам избежать использования дополнительных div’ов, ID или классов.

<nav>
<ul>
<li><a href="#">PixelsDaily<br /> <small>Go Home</small></a></li>
<li><a href="#">About<br /> <small>Meet Us</small></a></li>
<li><a href="#">Clients<br /> <small>Meet Our Friends</small></a></li>
<li><a href="#">Work<br /> <small>See Our Work</small></a></li>
<li><a href="#">Podcast<br /> <small>Hear Us</small></a></li>
<li><a href="#">Downloads<br /> <small>Steal Our Stuff</small></a></li>
<li><a href="#">Blog<br /> <small>Read About Us</small></a></li>
<li><a href="#">Contact<br /> <small>Email Us</small></a></li>
</ul>
</nav>

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

Разработка адаптивного навигационного меню

Начальная стилизация

Давайте начнем разработку нашего CSS-файла со старого доброго универсального селектора, и воспользуемся советом Пола Айриша, применив параметр box-sizing: border-box к каждому элементу. Это поможет нам без труда масштабировать элементы посредством процентного соотношения, даже несмотря на то, что мы используем границы.

* {
padding: 0;
margin: 0;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Стили контейнеров

Перед тем как начать разработку стилей отдельных элементов списка, давайте применим немного основной стилизации к нашим родительским элементам. Для начала, укажите элемент nav и установите ему 90% в качестве значения ширины тела. Это растянет его почти на все доступное пространство, но оставит немного места для навигации. Не забудьте центрировать его по всей странице, а также выставить поля (margins) на auto.

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

nav {
width: 90%;
margin: 50px auto;
}

nav ul {
list-style: none;
overflow: hidden;
}

Разработка адаптивного навигационного меню

Стилизация меню

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

Не нужно бояться этого большого куска кода, мы постараемся максимально подробно вам объяснить.

nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
}

/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;

}

Здесь мы расположили параметры в алфавитном порядке для того, чтобы в нем было легче разобраться. Мы рекомендуем вам всегда так организовывать код, это значительно упрощает многие вещи впоследствии. Группируйте стили по функциям так, чтобы все было доступно и понятно. Если мы переорганизуем наши стили таким образом, то их будет легче объяснять.

nav li a {
display: block;
float: left;
width: 12.5%;
padding: 10px;

background: #444;
border-right: 1px solid #fff;

color: #fff;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}

Вначале мы видим отрывок кода, который отвечает за внешнюю структуру и шаблон каждого пункта списка. Мы изменили анкоры на блочные, выстроили их по левому краю, задали ширину и небольшие отступы. Это позволило нам создать привлекательной большой прямоугольник для каждой ссылки в меню. Почему ширина оказалась 12.5%? Да потому, что у нас 8 пунктов, следовательно: 100%/8=12.5%.

Далее идет кусочек кода, отвечающий за внешнюю стилизацию блоков, которые мы только что создали. Мы задали им цвет фона, а также 1-пиксельную границу с правой стороны.

Наконец, всё это мы подкрепили стилизацией текста, используемого в меню. Здесь все вполне доступно и понятно. Вы наверняка заметили, что мы используем шрифт «Cutive», который мы можете скачать здесь.

Что касается стилей small, то здесь мы изменили цвет, убрали параметр text-transformation: uppercase, и выставили шрифт Helvetica.

Проверка прогресса

Эти стили виновны во всех изменениях, происходящих в мире. Теперь наше меню выглядит гораздо привлекательнее. Пользовательский шрифт работает, ссылки отображены построчно, маленький текст идеален.

Разработка адаптивного навигационного меню

Стили при наведении

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

nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;

/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}

/*HOVER*/
nav li a:hover {
background: #222;
}

Разработка адаптивного навигационного меню

Исправляем границу

Сейчас вы этого не замечаете, но у нас возникла некоторая проблема с границами. Они изначально предназначены для того, чтобы разделять пункты в нашем меню, а это значит, что последнему пункту эта граница не требуется. Для того чтобы исправить это, мы можем использовать псевдо-класс last:child.

nav li:last-child a {
border: none;
}

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

Разработка адаптивного навигационного меню

Делаем меню адаптивным

Данный эксперимент изначально был направлен на то, чтобы показать разницу между резиновой версткой и адаптивным дизайном. На данный момент наше меню построено на основе резиновой верстки (у нас используются значения ширины в процентном соотношении), и оно ни в коем случае не адаптивно сейчас. Мы можем четко видеть это при попытке уменьшить размер окна браузера:

Разработка адаптивного навигационного меню

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

1220px

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

Разработка адаптивного навигационного меню

Для того чтобы исправить это, нам нужно выставить размер шрифта. Определяем область перед тем, как возникает проблема (1220 пикселей), и выставляем размер шрифтов на 10 пикселей.

/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
nav li a {
font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}

nav small {
font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
}
}

После этого изменения проблема исчезает. По мере уменьшения размера окошка, меню также уменьшается.

Разработка адаптивного навигационного меню

930px

Опять же, уменьшаем размер окошка, и видим, что все элементы начинают путаться. Здесь наша проблема заключается в перенаполнении:

Разработка адаптивного навигационного меню

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

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav li a {
width: 25%;
border-bottom: 1px solid #fff;
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}

nav li:last-child a, nav li:nth-child(4) a {
border-right: none;
}

nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
border-bottom: none;
}
}

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

Разработка адаптивного навигационного меню

580px и 320px

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

Разработка адаптивного навигационного меню

Для того чтобы решить данную проблему, мы дополним наши media queries форматов из 2 колонок и 4 строками. Мы будем использовать данный формат для 580 пикселей и ниже, а также будем немного уменьшать шрифт при размере в 320 пикселей.

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav li a {
width: 50%;
font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 12px;
}

nav li:nth-child(even) a {
border-right: none;
}

nav li:nth-child(5) a, nav li:nth-child(6) a {
border-bottom: 1px solid #fff;
}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
nav li a {
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
}

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

Разработка адаптивного навигационного меню

Selectivizr

Некоторые из вас, вероятно, заметили, что мы учли вариант с html5shim для старых версий браузеров IE только для того, чтобы заставить наши любимые селекторы псевдо-классов работать. Не забудьте также скачать Selectivizr, забавную javascript-утилиту, разработанную специально для организации работы CSS3-селекторов в IE6-8.

Разработка адаптивного навигационного меню

Заключение

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

После нашего сегодняшнего руководства вы без труда сможете разработать собственный проект с адаптивным навигационным меню. Не забудьте оставить комментарий ниже.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 8856   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930