Показываем блок меню ME606 по клику в Tilda

Пожалуйста, внимательно и пошагово выполняйте инструкцию, во избежание ошибок!

В данной статье я расскажу, как сделать скрытое меню как у skillbox из блока на примере блока ME606, которое раскрывается по клику.
Я делаю данный пример на меню ME606, потому что данный блок напоминает меню на сайте Skillbox и Zero блока, который выступит в качестве самой шапки. Вы можете использовать любой блок, например слепить что-то из Zero.

Пример реализации

Инструкция

Шаг 1

1. Создаём шапку сайта в Zero block
2. Создаём кнопку открытия меню (для этого любому элементу добавьте ссылку #open-nav
3. Создайте блок меню ME606, скопируйте его id
4. Создайте T123, добавьте в него скрипт
5. Вставьте id блока меню ME606 (первая строка)
6. Вставьте id Zero блока из п.1 (вторая строка)
7. Опубликуйте страницу.

Для блока ME606 необходимо устанавливать отступ сверху, это делается через стандартные настройки блока. Отступ должен быть больше чем высота вашей шапки (Zero блока из п.1).

Так же я добавил возможность менять позиционирование шапки, просто установите нужное значение (absolute, fixed, relative) следуя комментариям в коде

<!--С анимацией-->
<script>
  //замените id блока ME606 (по желанию можете использовать любой блок, просто впишите его id)
  var AnkuNav = $('#rec386966340').addClass('anku-nav');//id ME606
  var Head = $('#rec386966340').addClass('header-main');//id Zero block, который шапка

  var OpenNav = $('a[href=#open-nav]').addClass('anku-nav-trigger');
  $('body').append('<div class="nav-overlay close-nav"><div>');
  var CloseNav = $('a[href=#close-nav], .close-nav');
  $.fn.extend({
    toggleText: function(a, b) {
      return this.text(this.text() == b ? a : b);
    }
  });
  $(OpenNav).click(function(e) {
    e.preventDefault();
    $('body').toggleClass('anku-nav-nav-is-open');
    $(this).toggleClass('active');
  });
  $(CloseNav).click(function(e) {
    e.preventDefault();
    $('body').removeClass('anku-nav-nav-is-open');
    $('.anku-nav-trigger').removeClass('active');
  });
</script>

<style>
  :root {
    --transition-nav: .5s; /*скорость анимации*/
    --overlay-opacity: .8; /*прозрачность слоя затемнения*/
    --overlay-bg: #000; /*цвет слоя затемнения*/
    --head-position: absolute; /*СТИЛЬ ШАПКИ: с наложением на нижний блок absolute / с фиксацией fixed /статичная relative */
  }

  .anku-nav-trigger.active {
    /*можете написать стили кнопке, когда меню открыто*/
    /*background-color: #000 !important;*/ /*цвет фона*/
    /*color: #000 !important;*/ /*цвет текста*/
    /*border-radius: 30px !important;*/ /*скругление углов*/
    /*border-width: 2px !important;*/ /*толщина обводки*/
    /*border-color: #000 !important;*/ /*цвет обводки*/
  }

  .anku-nav {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: -100%;
    z-index: 9100;
    transition: all var(--transition-nav);
  }

  .anku-nav-nav-is-open {
    overflow: hidden;
  }

  .header-main {
    position: var(--head-position);
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9200;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 9000;
    background: var(--overlay-bg);
    transition: all var(--transition-nav);
  }

  .close-nav {
    cursor: pointer;
  }

  .anku-nav-nav-is-open .nav-overlay {
    opacity: var(--overlay-opacity);
    pointer-events: all;
  }

  .anku-nav-nav-is-open .anku-nav {
    top: 0;
  }
</style>