Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Navigation Design

Как сделать Off-Canvas меню с помощью CSS и немного JavaScript

by
Read Time:4 minsLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

В этом руководстве мы рассмотрим простой, но эффективный метод создания off-canvas меню с помощью HTML, CSS и JavaScript.

Чтобы получить первоначальное представление о том, что мы будем делать, ознакомьтесь с соответствующей демонстрацией в CodePen (ознакомьтесь с полной версией для лучшего понимания):

Примечание: Это руководство не будет фокусироваться на том, как сделать off-canvas меню доступным или отзывчивым, а это, несомненно, были бы правильные следующие шаги.

1. Начнем с разметки

Наша разметка состоит из двух элементов-оберток:

  • элемент .top-banner
  • элемент .top-nav

Вот HTML код:

2. Далее нам нужен CSS

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

Примечание: Для удобства чтения этот CSS-код не оптимизирован - вы заметите повторяющиеся свойства, которые вы можете убрать в своей собственной версии.

Стилизуем элемент top-banner

Элемент .top-banner выглядит следующим образом:

How the top-banner element looks likeHow the top-banner element looks likeHow the top-banner element looks like

Для его стилизации мы делаем следующее:

  • Установите его ширину равной ширине окна минус ширина элемента .menu-wrapper.
  • Установите его высоту, равной высоте окна.
  • Определите его как flex контейнер. Это заставит его занять всю высоту родительского контейнера.
  • Используйте flexbox для вертикального центрирования контента.

Вот стили, которые нам нужны для достижения всего этого:

Стилизуем элемент top-nav

Элемент .top-nav выглядит так:

How the top-nav element looks likeHow the top-nav element looks likeHow the top-nav element looks like

Здесь мы сделаем следующее:

  • Задайте прямым дочерним элементам, которые занимают всю высоту окна, фиксированное позиционирование.
  • Используйте flexbox, чтобы выровнять элемент .fixed-menu по вертикали.
  • Скроем элемент .menu-wrapper по умолчанию. Чтобы сделать это, мы не будем задавать ему такое свойство, как display: none. Мы используем функцию translate(), чтобы переместить его на 200 пикселей влево. Имейте в виду, что ширина элемента составляет 350 пикселей, поэтому его часть все еще находится в области просмотра. Однако это не видно, потому что элемент расположен под элементом .fixed-menu.
  • Скройте список меню.

Посмотрите на соответствующие стили CSS ниже:

3. Теперь немного JavaScript

Здесь мы будем использовать простой JavaScript-код для управления состоянием off-canvas меню.

Опишем необходимые действия:

  • Когда нажата кнопка .menu-open, меню должно появиться с красивым slide-in эффектом, а наложение должно быть одновременно подвинуто вправо. По желанию мы можем сделать намного больше вещей на этом шаге. В нашем примере мы добавляем box shadow к псевдо-элементу оверлея ::before и показываем список меню, используя эффект затухания.
  • Когда нажата кнопка .menu-close, меню должно исчезнуть с красивым slide-out эффектом, а наложение должно быть одновременно подвинуто влево.

Вот код JavaScript, который реализует это поведение:

Ниже вы найдете необходимые CSS стили:

4. Поддерживаемые браузеры

Эта демонстрация будет хорошо работать только на настольных браузерах. Для мобильных устройств потребуется другой макет страницы, но это выходит за рамки данного руководства. Как обычно, мы используем Babel для компиляции кода ES6 до ES5.

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

Заключение

Вот и все, ребята! Нам удалось создать полезное off-canvas меню с относительно простым кодом.

Надеюсь, вам понравился конечный результат, и вы будете использовать его в качестве вдохновения для создания еще более мощных off-canvas меню. И, конечно, если вы их сделаете, не забудьте поделиться ими с нами!

Узнайте больше Off-Canvas техник 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.