Как создать адаптивную навигацию

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

На самом деле существует множество способов создания адаптивной навигации по веб-сайту, и даже некоторые плагины jQuery доступны для этого за секунду..

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

Итак, начнем.

демонстрация
Скачать исходный код

HTML

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

… А затем добавьте следующий фрагмент в качестве разметки навигации внутри тело тег.

   Главная
 Как
 Иконки
 дизайн
 Веб 2.0
 инструменты
 
 Меню

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

Дальнейшее чтение: Не забудьте метатег viewport.

Стили

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

 body background-color: # ece8e5;

навигационный тег, определяющий навигацию, будет иметь 100% полная ширина окна браузера, а уль где он содержит наши основные меню ссылки 600px для ширины.

 nav height: 40px; ширина: 100%; фон: # 455868; размер шрифта: 11pt; семейство шрифтов: «PT Sans», Arial, без засечек; вес шрифта: полужирный; положение: относительное; нижняя граница: 2px solid # 283744;  nav ul padding: 0; поле: 0 авто; ширина: 600 пикселей; высота: 40 пикселей;

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

 nav li display: inline; плыть налево;

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

 .clearfix: before, .clearfix: after content: ""; дисплей: стол;  .clearfix: после clear: оба;  .clearfix * увеличить: 1;

Так как у нас есть шесть ссылок меню, и мы также указали контейнер для 600px, ссылки на каждое меню будут иметь 100px для ширины.

 nav a color: #fff; дисплей: встроенный блок; ширина: 100 пикселей; выравнивание текста: по центру; текстовое оформление: нет; высота строки: 40px; тень текста: 1px 1px 0px # 283744;

Ссылки меню будут разделены 1px Правая граница, кроме последней. Помните наш предыдущий пост о блочной модели, ширина меню будет расширена на 1px делая это 101px как дополнение границы, поэтому здесь мы меняем коробчатого проклейки модель для граница-бокс чтобы сохранить меню осталось 100px.

 nav li a border-right: 1px solid # 576979; коробчатого проклейки: граница-бокс; -moz-бокс-проклейки: граница-бокс; -webkit-коробчатого размеров: границы коробки;  nav li: last-child a border-right: 0;

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

 nav a: hover, nav a: active background-color: # 8c99a4;

… И, наконец, дополнительная ссылка будет скрыта (для экрана рабочего стола).

 nav a # pull display: none;

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

Дальнейшее чтение: CSS3 Box-sizing (Hongkiat.com)

Медиа-запросы

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

Поскольку наша навигация изначально 600px fix-width, мы сначала определим стили при просмотре в 600px или меньший размер экрана, так что практически, этот наша первая точка останова.

При таком размере экрана каждая из двух ссылок меню будет отображаться рядом, поэтому ульширина здесь будет 100% окна браузера, в то время как ссылки меню будут иметь 50% для ширины.

 экран @media и (max-width: 600px) nav height: auto;  nav ul ширина: 100%; дисплей: блок; высота: авто;  nav li width: 50%; плыть налево; положение: относительное;  nav li a border-bottom: 1px solid # 576979; Граница справа: 1px solid # 576979;  nav a text-align: left; ширина: 100%; текстовый отступ: 25px;

... а затем мы также определяем, как отображается навигация, когда экран уменьшается 480px или ниже (так что это наша вторая точка останова).

В этом размере экрана будет добавлена дополнительная ссылка, которую мы добавили ранее, и мы также дадим ссылку “Меню” значок на правой стороне с помощью :после Псевдо-элемент, в то время как ссылки основного меню будут скрыты, чтобы сохранить больше вертикальных мест на экране.

 экран @media only и (max-width: 480px) nav border-bottom: 0;  nav ul display: none; высота: авто;  nav a # pull display: block; цвет фона: # 283744; ширина: 100%; положение: относительное;  перейти на # pull: after content: ""; background: url ('nav-icon.png') no-repeat; ширина: 30 пикселей; высота: 30 пикселей; дисплей: встроенный блок; положение: абсолютное; справа: 15 пикселей; верх: 10 пикселей;

Наконец, когда экран становится меньше на 320px и ниже меню будет отображаться вертикально сверху вниз.

 экран @media only и (max-width: 320px) nav li display: block; плавать: нет; ширина: 100%;  nav li a border-bottom: 1px solid # 576979;

Теперь вы можете попробовать изменить размер окна браузера. Теперь должна быть возможность адаптировать размер экрана.

Дальнейшее чтение: Медиа-запросы для стандартных устройств.

Показ меню

На этом этапе меню все еще будет скрыто и будет видно только тогда, когда это необходимо, нажав или нажав на “Меню” ссылку, и мы можем добиться эффекта с помощью jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', function (e) e.preventDefault (); menu.slideToggle ();););

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

Итак, нам нужно удалить этот стиль при изменении размера окна следующим образом:

 $ (window) .resize (function () var w = $ (window) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

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

демонстрация
Скачать исходный код

Бонус: альтернативный путь

Как мы упоминали ранее в этом посте, есть несколько других способов сделать это, и использовать библиотеку JavaScript под названием SelectNav.js это один из самых простых способов. Это чистый JavaScript, который не зависит от другой сторонней библиотеки, такой как jQuery.

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

Пожалуйста, обратитесь к официальной документации для дальнейшей реализации.

Заключение

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