Как создать кнопку мобильного меню с анимацией — HRCode
Верстка элементов

Как создать кнопку мобильного меню с анимацией

Обязательный элемент современных сайтов, это кнопка мобильного меню. Делают такие кнопки разных форм и размеров, все зависит от дизайна сайта, от пожеланий владельца и от множества других причин.
В этой статье мы покажем один из вариантов такой кнопки с уже готовым кодом для использования.

Здесь представлена не только кнопка с анимацией, но и код, который делает затемнение фона сайта и код, который блокирует прокрутку контента при пользовании мобильным меню. В общем данный код представляет из себя целый набор функций для более удобного и быстрого использования на сайте.
Остается только создать само мобильное меню и подключить его к этой кнопке.

Создаем HTML код для кнопки мобильного меню

Сам HTML блок для такой кнопки очень простой. Создается общий блок-контейнер, внутри него помещается блок с линиями кнопки и блок, который отвечает за затемнение фона.
Если брать в целом мобильное меню, то внутри основного блока будет находиться и блок с мобильным меню, но в данном варианте мы рассматриваем только саму кнопку.

В данном примере блок-контейнер имеет класс hr-mobile-menu, внутри него находится блок кнопки с классом hr-mobile-menu__button, который отвечает за размер кнопки, цвет ее фона и некоторые другие параметры, и блок который отвечает за затемнение экрана при активном мобильном меню с классом hr-mobile-menu__overlay.
Если вам не нужно затемнение фона, этот блок можно удалить вместе со стилями и частью кода в скрипте.

Внутри блока с классом hr-mobile-menu__button находится блок с классом hr-mobile-menu__line, который отвечает за изображение линий из которых состоит кнопка и их внешний вид.

html

<!-- Блок мобильного меню -->
<div class="hr-mobile-menu">
  <!-- Кнопка мобильного меню -->
  <div class="hr-mobile-menu__button">
    <span class="hr-mobile-menu__line"></span>
  </div>
  <!-- Фон затемнения -->
  <div class="hr-mobile-menu__overlay"></div>
</div>

Создаем стили для кнопки мобильного меню

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

В данном примере за отключение прокрутки страницы отвечает класс hr-locking, который мы добавили к тегу body.
В HTML коде он появляется с помощью скрипта при нажатии на кнопку мобильного меню.

css

/* Блокируем прокрутку страницы */
body.hr-locking {
  overflow: hidden;
}

Также к дополнительным настройкам можно отнести и затемнение фона при активном мобильном меню, так как она может уже быть настроена на вашем сайте и к анимации самой кнопки отношения не имеет.
Здесь мы классу hr-mobile-menu__overlay дали фиксированное расположение, прижали его к верху и слева, и затем растянули на весь экран.
Первоначально этот класс скрыт, появится он при активном мобильном меню с помощью скрипта.

css

/* Затемнение фона мобильного меню */
.hr-mobile-menu__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  z-index: 5;
}

Теперь перейдем к настройкам внешнего вида самой кнопки. Рассмотрим, как его настроить на примере существующей кнопки.
Основной блок кнопки имеет класс hr-mobile-menu__button. Именно этому классу мы задаем размеры кнопки, цвет и расположение на экране.

css

/* Внешний вид кнопки */
.hr-mobile-menu__button {
  position: fixed;
  top: 20px;
  right: 25px;
  width: 45px;
  height: 45px;
  background-color: #f6f0e7;
  border-radius: 50%;
}

Фиксируем положение кнопки на экране и задаем отступы сверху и справа исходя из дизайна макета.
При необходимости ее можно сделать круглой или квадратной, залить любым цветом.

Далее переходим к оформлению линий на кнопке, которые будут делать ей внешний вид и анимацию.
За отображение линии у нас отвечает класс hr-mobile-menu__line. Но один этот класс создаст только одну линию по середине кнопки и для создания еще двух, ниже и выше основной мы будем использовать псевдоэлементы ::before и ::after к этому классу.

css

/* Внешний вид линий */
.hr-mobile-menu__line,
.hr-mobile-menu__line::before,
.hr-mobile-menu__line::after{
  position: absolute;
  width: 25px;
  height: 4px;
  background: #323a47;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

Задаем классу hr-mobile-menu__line и его псевдоэлементам общие стили, к которым относятся размер линий их цвет и абсолютное расположение относительно класса hr-mobile-menu__button.
Также зададим время перехода для более плавной анимации при нажатии на кнопку.

css

/* Центрируем расположение линий */
.hr-mobile-menu__line {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Далее нужно расположить наши линии по центру блока кнопки с классом hr-mobile-menu__button.

css

/* Смещаем верхнюю и нижнюю линии */
.hr-mobile-menu__line::before {
  content: '';
  top: -8px;
}

.hr-mobile-menu__line::after {
  content: '';
  top: 8px;
}

Следующим шагом нужно будет сместить линии с псевдоэлементами так, чтобы одна была сверху, другая снизу. По умолчанию они все находятся на одном уровне.

После создания статичной кнопки переходит к ее анимации. Сделаем так, чтобы при нажатии на кнопку появлялся крестик.

css

/* Анимация кнопки мобильного меню */
.hr-mobile-menu__active .hr-mobile-menu__line {
  background-color: transparent;
}

.hr-mobile-menu__active .hr-mobile-menu__line::before {
  top: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hr-mobile-menu__active .hr-mobile-menu__line::after {
  top: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

Для этого создаем новый класс hr-mobile-menu__active, который будет появляться только при нажатии на кнопку. Его появление мы оформим в скрипте.
При активном классе hr-mobile-menu__active среднюю линию с классом hr-mobile-menu__line мы скрываем.
А верхнюю и нижнюю линии с псевдоэлементами ::before и ::after мы поворачиваем на 45 градусов так, чтобы при их повороте получился крестик.

С HTML и CSS кодом на этом все, остается оформить анимацию в скрипте. Для этой анимации будем использовать библиотеку JQuery.

Создаем скрипт для кнопки мобильного меню

js

jQuery(function() {
   $('.hr-mobile-menu__button').on('click',function(e) {
     e.preventDefault();
     $('.hr-mobile-menu').toggleClass('hr-mobile-menu__active');

     if ($('.hr-mobile-menu').hasClass('hr-mobile-menu__active')) {
       $('.hr-mobile-menu__overlay').fadeIn(700);
       $('body').addClass('hr-locking');
     }
     else {
       $('.hr-mobile-menu__overlay').fadeOut(700);
       $('body').removeClass('hr-locking');
     }
   })

   $('.hr-mobile-menu__overlay').on('click',function() {
     $('.hr-mobile-menu__overlay').fadeOut(700);
     $('.hr-mobile-menu').removeClass('hr-mobile-menu__active');
     $('body').removeClass('hr-locking');
   }
   )
 });
 

Данный код скрипта очень простой, не буду подробно описывать каждую строчку, поговорим о логике, зная ее можно написать код с помощью любой библиотеки.
При нажатии на кнопку мобильного меню мы добавляем к классу hr-mobile-menu класс hr-mobile-menu__active, если он еще не добавлен.
Затем проверяем, если к классу hr-mobile-menu добавлен класс hr-mobile-menu__active, то показываем элемент с классом hr-mobile-menu__overlay, который отвечает за затемнение экрана и добавляем к тегу body класс hr-locking, который отвечает за блокировку прокрутки страницы.
Иначе мы скрываем элемент с классом hr-mobile-menu__overlay и удаляем класс hr-locking.

Самый нижний участок кода отвечает за то, чтобы мобильное меню убиралось не только по клике по кнопке меню, но и при клике на темный фон экрана, что делает наше меню более удобным. Также при сворачивании мобильного меню мы убираем блокировку прокрутки экрана.
Как работает данная кнопка мобильного меню, можно посмотреть на этом сайте.

Еще по теме:

Напишите что нибудь:

Ваш адрес email не будет опубликован. Обязательные поля помечены *