Bootstrap 4 сниппеты: адаптивное меню

9 минут на чтение

С учетом возрастания количества, а в некоторых случаях преобладания, на сайтах посетителей, заходящих с мобильных устройств, адаптивное меню становится обязательной составляющей сайта. Bootstrap 4 включает отличный инструмент для создания  адаптивного меню – компонент “Навигационная панель”.

Техническое задание

Функционал:

  • адаптивное меню
  • анимация кнопки меню
  • анимация поля ввода “Поиск”
  • индикатор (прогрессбар) прокрутки

Требования к верстке:

  • в полноразмерной версии логотип посередине,  в свернутом виде – справа
  • 2 секции меню: по левой и правой стороне в полноразмерной версии
  • меню должно быть закреплено (“приклеено”) вверху страницы: sticky-top
  • индикатор прокрутки по  нижней границе меню

Верстка

Для полноразмерной и свернутой версии меню добавляем два блока с логотипом: первый отображается на экранах меньше размера lg (992 px), когда меню свернуто (за это отвечает класс d-lg-none),

второй на экранах больше 992 px – для полноразмерной версии меню (для этого прописываем классы d-none d-lg-block)

Для создания секций с ссылками, расположенных по левой и правой сторонам, навигационной панели присваиваем класс justify-content-between. Содержимое навигационной панели  2 списка, между списками  блок с логотипом полноразмерной версии.

Для того, чтобы меню всегда было закреплено сверху навигационной панели присваиваем класс sticky-top.

Для индикатора прокрутки страницы создаем отдельный блок, прописываем следующие стили

Функционал

Адаптивное меню

Для того чтобы меню было адаптивным используем навигационную панель Bootstrap.

Анимация кнопки

По умолчанию, в навигационной панели отсутствует анимация кнопки меню, поэтому для создания анимации необходимо поменять картинку background-image для активного состояния меню, добавим стиль для активного состояния кнопки:

Также необходимо при нажатии на кнопку добавлять ей класс active 

Анимация поля ввода

На полноразмерной версии меню сделаем поле ввода “Поиск” скрытым, отображаться оно будет по нажатию на кнопку “Поиск”:

Индикатор прокрутки страницы

Добавляем на страницу индикатор прокрутки, стили для нег указаны выше:

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

Пример #1

 

See the Pen WOV shippets BS header 1 by Paul (@1110000) on CodePen.

Facebook Vk Ok Twitter Telegram

Похожие записи:

Продолжим верстку ранее начатого макета на Bootstrap 4, подробнее здесь. Рассмотрим как разбить макет на секции, оформить их и сделать более удобной прокрутку на сайте. Техническое задание Функционал: плавная прокрутка Требования к верстке: г...
Боковое меню или , при необходимости, слайдер создан с использованием CSS Flexbox. Позволяет компактно разместить контент, разного типа и объема. По функциональности  и универсальности превосходит выпадающее меню. Отлично подойдет для главной страницы сайта. ...
Модальные окна, такие полезные, а иногда, такие надоедливые, являются популярным элементом пользовательского интерфейса. Модальное окно – это окно, блокирующее работу с приложением, до тех пор пока его не закроют. Область применения достаточно велика: диалогов...