Верстка адаптивного меню на Bootstrap 4

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

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

Функционал:

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

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

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

Верстка

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

<div><a class="navbar-brand logo d-lg-none" href="#">WOV</a></div>

1 2	<!-- Логотип для свернутой версии меню справа --> <div><a class="navbar-brand logo d-lg-none" href="#">WOV</a></div>

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

<div><a class="navbar-brand logo d-none d-lg-block" href="#">WOV</a></div>

1 2	<!-- Логотип для полноразмерной версии меню - посередине --> <div><a class="navbar-brand logo d-none d-lg-block" href="#">WOV</a></div>

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

</div>

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

1	<nav class="navbar navbar-expand-lg navbar-light sticky-top">

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

.page_scroll_status{ display: block; height: 3px;//высота индикатора background-color: #9CCC65; position: fixed; //позиционирование относительно окна top: 58px; //сдвиг вниз на величину высоты меню z-index: 9999; //располагаем поверх остальных элементов }

.page_scroll_status{

display: block;

height: 3px;//высота индикатора

background-color: #9CCC65;

position: fixed; //позиционирование относительно окна

top: 58px; //сдвиг вниз на величину высоты меню

z-index: 9999; //располагаем поверх остальных элементов

}

Функционал

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

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

1	<nav class="navbar navbar-expand-lg navbar-light sticky-top"></nav>

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

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

.navbar-toggler.active .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='grey' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8l20 16M4 24L24 8'/%3E%3C/svg%3E"); }

.navbar-toggler.active .navbar-toggler-icon {

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='grey' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8l20 16M4 24L24 8'/%3E%3C/svg%3E");

}

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

$(".navbar-toggler").on("click", function () { $(this).toggleClass("active"); });

$(".navbar-toggler").on("click", function () {

$(this).toggleClass("active");

});

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

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

//анимация поиска $('#btn_nav_search').on('click',function(){ active = $('.inpt_nav_search.active_state').length if(active){ $('.inpt_nav_search.active_state').removeClass('active_state').fadeOut(); return; } $('.inpt_nav_search:not(\'.active_state\')').addClass('active_state').fadeIn().find('input').focus(); })

//анимация поиска

$('#btn_nav_search').on('click',function(){

active = $('.inpt_nav_search.active_state').length

if(active){

$('.inpt_nav_search.active_state').removeClass('active_state').fadeOut();

return;

}

$('.inpt_nav_search:not(\'.active_state\')').addClass('active_state').fadeIn().find('input').focus();

})

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

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

1	<div class="page_scroll_status" id="scrollpage_progessbar"></div>

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

window.onscroll = function() {scrollPage()}; function scrollPage() { var windowScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scroll = (windowScroll / height) * 100; document.getElementById("scrollpage_progessbar").style.width = scroll + "%"; }

window.onscroll = function() {scrollPage()};

function scrollPage() {

var windowScroll = document.body.scrollTop || document.documentElement.scrollTop;

var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

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