Логотип блога MY

 ВЕБ-ТЕХНОЛОГИИ

 Домен itworldmy.ru - блог MY

начинающим

Адаптивное бургер меню 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>О&nbsp;сайте</span>
      <!--#elif expr="$DOCUMENT_URI=/^\/about\//" -->
      <a href="/about/index.html" class="current">О&nbsp;сайте</a>
      <!--#else -->
      <a href="/about/index.html">О&nbsp;сайте</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">О&nbsp;сайте</a>
      <a href="/map/index.html">Карта&nbsp;сайта</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. Стандартные средства и не только позволяют отказаться от сторонней графики в пользу собственной.



Комментарии
Опубликовано: 0
Ждущих публикации: 0


Ваше имя:
(не более 20 символов)

Ваше сообщение:
(не более 1000 символов)



Новое в разделах

Делать сайт / MYsiteD

Разное

Архив Новостей


Данные

Время  - 04:18:58
Дата - 05.10.2022

Страница:
 - обновлена - 15.07.2022
 - посещений - 360

Сейчас:
 - на сайте - 2
 - переходов - 1


↑ ВВЕРХ