Адаптивное бургер меню css js - запросто в 4 шага

Теперь станем превращать вертикальную мобильную навигацию, ранее созданную с применением серверных вставок ssi, в адаптивное бургер меню css js, как было обещано в предыдущей статье. Часто его называют еще "гамбургер" меню из-за использования миниатюры-иконки, выглядящей наподобие многослойного бутерброда.

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

Окружение

Настоящее отзывчивое гамбургер меню будет создано на базе языков CSS, JavaScrip и конечно HTML, а также со шрифтом Font Awesome (масштабируемые векторные символы). Существует несколько вариантов его подключения. Все они подробно рассмотрены в следующей статье подобной тематики. Сейчас же будет применяться лишь один из них, когда требуемые символы шрифта Font Awesome выборочно скачиваются и хранятся на определенном веб-ресурсе. В данном случае - иконка гамбургер меню.

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

Общие принципы создания адаптивного бургер меню css js

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

При этом, на большом мониторе навигационные элементы второго варианта блокируются благодаря свойству display: none;, как и аналогичным образом блокируются на малом экране навигационные элементы первого. Таким образом, на десктопах и ноутбуках внешний вид шаблона не изменится, а на малых мобильных устройствах внешний вид основного меню станет отображаться в двух состояниях (закрытом и открытом), как это представлено на скриншоте ниже.

Пошаговые действия

За исходный текст, подлежащий небольшому редактированию ниже, принимается код архива шаблона демонстрационного сайта, уже представленного в статье о создании адаптивного горизонтального вебменю из вертикального. Потребуются три файла: general-includes/header.shtml (1), general-includes/footer.shtml (2) и general-styles/style.css (4), также в директории general-styles создается папка fonts (3) с файловой структурой Font Awesome.

Шаг 1 - header.shtml

1) Перед /head необходимо вставить строку:

Она предназначена для связи с fonts/style.css.

Внимание! Не путать /head с /header.

2) Блок основной навигации nav после строки с /header заменить на следующий:

Пояснение. Этот обновленный блок содержит теперь два контейнера, это и есть то самое «небольшое дополнение». Первый - div class="nav-big" (стр. 15-61) для больших экранов. Второй - div class="nav-mob" id="nav-js" (стр. 63-73), предназначен для малых на мобильных устройствах, содержит также обращение к скрипту JavaScript и вызов бургер миниатюры. Эффект "открытия/закрытия" достигается благодаря атрибуту - id с идентификатором - nav-js (стр. 63) и конструкции, реализованной в строках 70-72.

Шаг 2 - footer.shtml

После строки с /footer необходимо вставить код скрипта js, активизирующий и придающий динамику бургер меню:

Один из характерных примеров употребления JS.

Шаг 3 - style.css

1) Код блока - /* !!! ОФОРМЛЕНИЕ БЛОКА НАВИГАЦИИ !!! */ до /* !!! ОФОРМЛЕНИЕ ЦЕНТРАЛЬНОЙ КОЛОНКИ !!! */ заменяется на следующий:

Рекомендуется обратить внимание на стр. 38-41., которые блокируют элементы для смартфонов (класс .nav-mob).

2) Конечный блок - /* Правила, определяющие версию смартфонов */ должен быть заменен на:

Теперь рекомендуется обратить внимание на стр. 281-284, но сейчас блокируются уже элементы для настольных устройств (класс .nav-big).

Шаг 4 - подключение шрифта Font Awesome

Необходимо СКАЧАТЬ заранее подготовленный архив с папкой fonts (3), содержащей стили и примеры иконки, полученные из официального сайта Font Awesome. Далее требуется архив распаковать в директорию general-styles, перезагрузить создаваемый ресурс и можно наблюдать реузультат аналогичный изображению выше.

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

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

Быстрый результат

Не желающие вдаваться в вышеперечисленные подробности могут сразу получить желаемый результат. Нужно просто СКАЧАТЬ готовый шаблон с адаптивным бургер меню, восстановить его у себя на локальном хостинге и пользовать по своему усмотрению.

⚬ ⚬ ⚬

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

1. Существует мнение, что некоторые посетители не очень хорошо ориентируются в подобных веб-приложениях, не сразу понимая назначение данного символа и недовольные уходят. Если такой факт будет замечен, то возможно имеет смысл подумать о замене иконки кнопкой с вразумительной надписью, внятно объясняющей ее назначение.

2. Благодаря стандартным средствам CSS3 при желании можно вообще отказаться от сторонней графики в пользу индивидуальной и создаваемой самостоятельно.