Адаптивное бургер меню css js создаем легко в 4 шага
Теперь будем превращать вертикальную мобильную навигацию, ранее созданную с применением серверных вставок ssi, в адаптивное бургер меню css js, как было обещано в предыдущей статье. Часто его называют гамбургер меню, видимо, из-за использования специальной иконки, выглядящей наподобие многослойного бутерброда.
При нажатии на нее, верхняя система навигации, ставшая теперь компактной, может раскрываться и закрываться. Для мобильных устройств такое свойство фактически стало стандартом, поскольку позволяет на небольшом экране более оптимально использовать полезное рабочее пространство.
Окружение
Отзывчивое бургер меню будет создано на базе языков CSS и JavaScript при обязательном применении HTML, а также с использованием шрифта Font Awesome (масштабируемые векторные символы). Для этого можно подключиться непосредственно к самому фонду, используя тег <link>. Это самый простой способ, но не самый оптимальный. Гораздо лучше один раз выборочно скачать и разместить на своем веб-ресурсе лишь необходимое и больше ни от кого не зависеть. В данном случае так мы и поступим с нашей иконкой. В следующей статье будут подробно рассмотрены все способы подключения Font Awesome.
Нужно отметить, для лучшего восприятия и получения необходимого доступа к рассматриваемым ниже исходным текстам рекомендуется предварительно ознакомиться с предыдущими статьями «Создать сайт html css + динамические страницы ssi. Этап #3» и «Адаптивное горизонтальное меню html css + ssi».
Общие принципы создания адаптивного бургер меню css js
Они заключаются в следующих действиях. Главное меню будет расположено в верхней части сайта, но реализовано в двух разных вариантах. Первый предназначен для большого экрана, с использованием технологии ssi, как в предыдущих примерах, но с небольшим дополнением. Второй - для малых экранов мобильных устройств, с применением обычных блочных внутренних гиперссылок, скрипта JavaScript и бургер иконки.
При этом, на большом экране навигационные элементы второго варианта блокируются благодаря свойству display: none;, как и аналогичным образом блокируются на малом экране навигационные элементы первого. Таким образом, на десктопах и ноутбуках внешний вид шаблона не изменится, а на малых мобильных устройствах внешний вид основного меню станет отображаться в двух состояниях (закрытом и открытом), как это представлено на скриншоте ниже.
Пошаговые действия
За исходный текст принимается код представленный в статье «Адаптивное горизонтальное меню — код html css + ssi», подлежащий небольшому редактированию. Потребуются три файла: general-includes/header.shtml, general-includes/footer.shtml и general-includes/footer.shtml, а в директории general-styles создается папка fonts с файловой структурой Font Awesome.
Шаг 1 - header.shtml
1) Перед </head> необходимо вставить строку:
<link href="/general-styles/fonts/style.css" rel="stylesheet">
Она предназначена для связи с fonts/style.css.
Внимание! Не путать </head> с </header>.
2) Блок основной навигации <nav>...</nav> после строки </header> заменить на следующий:
<nav><div class="nav-big"><!--#if expr="$DOCUMENT_URI=/^\/index.html/" --><span>Главная</span><!--#else --><a href="/index.html">Главная</a><!--#endif --><!--#if expr="$DOCUMENT_URI=/^\/basics\/index.html/" --><span>Основы</span><!--#elif expr="$DOCUMENT_URI=/^\/basics\//" --><a href="/basics/index.html" class="current">Основы</a><!--#else --><a href="/basics/index.html">Основы</a><!--#endif --><!--#if expr="$DOCUMENT_URI=/^\/tech\/index.html/" --><span>Технологии</span><!--#elif expr="$DOCUMENT_URI=/^\/tech\//" --><a href="/tech/index.html" class="current">Технологии</a><!--#else --><a href="/tech/index.html">Технологии</a><!--#endif --><!--#if expr="$DOCUMENT_URI=/^\/applications\/index.html/" --><span>Приложения</span><!--#elif expr="$DOCUMENT_URI=/^\/applications\//" --><a href="/applications/index.html" class="current">Приложения</a><!--#else --><a href="/applications/index.html">Приложения</a><!--#endif --><!--#if expr="$DOCUMENT_URI=/^\/about\/index.html/" --><span>О сайте</span><!--#elif expr="$DOCUMENT_URI=/^\/about\//" --><a href="/about/index.html" class="current">О сайте</a><!--#else --><a href="/about/index.html">О сайте</a><!--#endif --><!--#if expr="$DOCUMENT_URI=/^\/map\/index.html/" --><span> Карта сайта </span><!--#elif expr="$DOCUMENT_URI=/^\/map\//" --><a href="/map/index.html" class="current"> Карта сайта </a><!--#else --><a href="/map/index.html"> Карта сайта </a><!--#endif --></div><div class="nav-mob" id="nav-js"><a href="/index.html" class="active">Главная</a><a href="/basics/index.html">Основы</a><a href="/tech/index.html">Технологии</a><a href="/applications/index.html">Приложения</a><a href="/about/index.html">О сайте</a><a href="/map/index.html">Карта сайта</a><a href="javascript:void(0);" class="icon" onclick="navfunction()"><span class="icon-navicon"></span></a></div></nav>
Пояснение. Этот обновленный блок содержит два контейнера. Один - <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> необходимо вставить код скрипта JavaScript, активизирующий и придающий динамику бургер меню:
<script>function navfunction() {var x = document.getElementById("nav-js"); /* Возвращает ссылку на элемент по его идентификатору */if (x.className === "nav-mob") { /* Свойство className отвечает за значение атрибута class элемента */x.className += " responsive";} else {x.className = "nav-mob";}}</script>
Один из характерных примеров использования JS.
Шаг 3 - style.css
1) Код блока - /* !!! ОФОРМЛЕНИЕ БЛОКА НАВИГАЦИИ !!! */ заменяется на следующий:
/* !!! ОФОРМЛЕНИЕ БЛОКА НАВИГАЦИИ !!! *//* Закрытие отображения контейнера .nav-mob */.nav-mob a {display: none;}/* Оформление ссылок навигации */.nav-big {padding: 5px 0 5px 0;background: #993333;text-align: center;border-bottom: solid 5px #cc6666;}.nav-big a, .nav-big span {background-color: #993333;padding: 2px 10px 2px 10px;}/* Оформление ссылок навигации при взаимодействии с "мышкой" */.nav-big a {color: #ccc;text-decoration: none;}.nav-big a:link, .nav-big a:visited {background: #993333;border: solid 2px #993333;}.nav-big a:hover, .nav-big a:active, .nav-big a.current:link, .nav-big a.current:visited, .nav-big span {border-style: solid dotted;border-width: 2px;border-color: #993333;color: #f5f5f5; /* цвет кнопок 1-го и 2-го уроаня при наведении */text-decoration: none;}.nav-big a.current:link, .nav-big a.current:visited, .nav-big span {background: #993333;color: #999; /* опредлеяет цвет 3-го уровеня */}.nav-big a.current:hover, .nav-big a.current:active {background: #993333;color: #f5f5f5; /* меняет цвет при наведении на 3-й уровень*/}.nav-big span {color: #f5f5f5; /* определяет цвет кнопок 1-го и 2-го уроаня после нажатия */text-decoration: none;}
Рекомендуется обратить внимание на стр. 40-42., которые блокируют элементы для сматфонов (класс .nav-mob).
2) Блок - /* !!! ПРАВИЛА ДЛЯ СМАРТФОНА !!! */ должен быть заменен на:
/* !!! ПРАВИЛА ДЛЯ СМАРТФОНА !!! */@media only screen and (max-width:600px) {header, nav, .text, main, .right, footer, .nav-mob {width:100%;}/* Отображение "бургер" меню в закрытом состоянии */.nav-mob a:not(:empty) {display: none;}.nav-mob a.icon {float: right;display: block;}/* Отображения "бургер" меню в открытом состоянии */.nav-mob.responsive {position: relative;}.nav-mob.responsive .icon {position: absolute;right: 0;top: 0;}.nav-mob.responsive a {float: none;display: block;text-align: left;}/* Закрытие отображения контейнера .nav-big */.nav-big {display: none;}.nav-mob {overflow: hidden;background-color: #993333;border-bottom: solid 5px #cc6666;}.nav-mob a {float: left;display: block;color: #ccc;text-align: center;padding: 12px 16px;text-decoration: none;font-size: 17px;}.nav-mob a:hover {background-color: #993333;color: #f5f5f5;}}
Теперь рекомендуется обратить внимание на стр. 283-285, но сейчас блокируются уже элементы для настольных устройств (класс .nav-big).
Шаг 4 - подключение шрифта Font Awesome
Нужно просто СКАЧАТЬ заранее подготовленный архив и распаковать его в директории general-styles.
На самом деле, имеется несколько различных способов подключения этого шрифта к сайтам. Они будут подробно описаны в другой статье, в том числе, как самостоятельно подготовить и установить на сайт нужное количество выбранных символов, а не один, как в данном случае.
Хочется напомнить, что в шаге 1 в блок <head> нами уже была вставлена строка под номером 3, которая предназначена для возможности использования таблицы стилей с требуемой иконкой, только что созданной выше.
Быстрый результат
Если не хочется вдаваться в вышеперечисленные подробности, то можно сразу получить желаемый результат. Для этого нужно просто СКАЧАТЬ готовый шаблон с адаптивным бургер меню, восстановить его у себя на локальном хостинге и использовать по своему усмотрению.
Заключение
На этом процедура описания, создания и подключения адаптивного бургер меню css js завершается, но есть два нюанса использования данного варианта навигации, о чем не стоит забывать.
1. Существует мнение, что некоторые посетители не очень хорошо ориентируются в таких веб-приложениях. Поскольку не сразу понимают назначение данного символа и недовольные уходят. Предположительно, даже навсегда, что особенно плохо. Если такой факт будет замечен, то возможно имеет смысл подумать о замене иконки кнопкой с соответсвующей надписью, понятно объясняющей дальнейшие необходимые действия.
2. Стандартные средства и не только позволяют отказаться от сторонней графики в пользу собственной.
