Кнопка основной навигации (Бургер)

Служит для вызова основной навигации на сайте (в основном для мобильной версии)

Демонстрация - https://dkorotkov.github.io/html/

Обратите внимание, что в примере данная кнопка отражается только в мобильной версии.

Основные данные

Кнопка

В качестве кнопки бургер использую ресурс - https://jonsuh.com/hamburgers/

Здесь представлена анимация и примеры с быстрой настройкой.

Лучшая практика

Вначале необходимо применить все правила для Кнопки

Кнопка

При управлении с клавиатуры, на событие открытия навигации, перемещать фокус на первый элемент.

Если открытая навигация теряет фокус, то закрывать навигацию.

Клавиша Escзакрывает навигацию.

Код

js - hamburger.js

Находится здесь - https://github.com/DKorotkov/html/tree/master/app/js/modules

html

Код ниже в качестве примера:

Кнопка

<button class="hamburger hamburger--squeeze" type="button" aria-label="Открыть основную навгацию" aria-controls="navigation" aria-expanded="false">
         <span class="hamburger-box">
            <span class="hamburger-inner"></span>
         </span>
   </button>

Элементы навигации

<nav class="nav" aria-label="Главная навигация">
      <div class="nav__container">
         <ul class="nav__box" id="navigation">
            <li><a class="nav__item" href="#">Cсылка 1</a></li>
            <li><a class="nav__item" href="#">Cсылка 2</a></li>
            <li><a class="nav__item" href="#">Cсылка 3</a></li>
            <li><a class="nav__item" href="#">Cсылка 4</a></li>
         </ul>
      </div>
   </nav>