1. Главная

Анимированный гамбургер для субтемы на базе Radix (bootstrap 4)

Главные вкладки

ivnish 20 июля 2021 в 14:02
1

Сегодня я расскажу как сделать анимированный гамбургер для субтемы на базе Radix (bootstrap 4). Эту же инструкцию можно будет использовать для любой темы на bootstrap 4

Будем использовать библиотеку hamburgers

1) Устанавливаем hamburgers. Прописываем "hamburgers": "^1.1.3" в package.json и запускаем npm install

2) Добавляем в style.scss импорт библиотеки

@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers";

3) В шаблоне страницы page.html.twig у вас должна быть такая запись {% embed '@radix/navbar/navbar.twig' with {

Я копирую шаблон navbar.twig из радикса в свою тему в каталог /templates/navigation

и меняю embed на {% embed '@YOUTHEME/navigation/navbar.twig' with {

4) В шаблоне navbar.twig меняю стиль кнопки гамбургера на

<button class="navbar-toggler hamburger hamburger--slider" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</button>

5) Компилируем SCSS

6) В js файл темы нужно добавить добавление и удаление класса is-active к гамбургеру для анимации по клику

     
$('.navbar-toggler').click(function() {
  $(this).toggleClass('is-active');
});

Автор

ivnish Drupal FullStack Developer
  • Drupal9
  • Drupal8
    • Веб-мастерам и владельцам сайтов

    Комментарии