Как сделать свое бургер меню в Тильда

В этом уроке будем создавать кастомное бургер меню для Тильда с использованием ChatGPT, он будет помогать формировать JS код.

Накладываем по верх полосок бургер меню прозрачный шейп с классом btn-menu

Чтобы скрыть само меню задаем ему класс uc-menu-wrapper и скрываем его right:100%;

Чтобы закрывать меню также задаем класс btn-menu-close для прозрачного шейпа по верх крестика

Подробно рассказал в видео как сделать такое меню 🙂

Код для бургер меню вы можете скачать тут 

<style>
    .uc-menu-wrapper {
        position:fixed;
        top:0; 
        left:0;
        right:100%; 
        z-index: 100; 
        transition: all 1000ms; 
    } 
    .active {
        right:0; 
    }
</style>


  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var btnMenu = document.querySelector('.btn-menu');
      var btnMenuClose = document.querySelector('.btn-menu-close');
      var ucMenuWrapper = document.querySelector('.uc-menu-wrapper');

      btnMenu.addEventListener('click', function () {
        ucMenuWrapper.classList.add('active');
      });

      btnMenuClose.addEventListener('click', function () {
        ucMenuWrapper.classList.remove('active');
      });
    });
  </script>

Почитаем еще?: