Как создать кастомное меню в Zero Block на Tilda

Всем привет, уважаемые пользователи Tilda! Сегодня рассмотрим такой пример, как создать своё меню в Zero Block и зафиксировать его на всю высоту вашего сайта.

Давайте немного поговорим, как это реализовать. Естественно, мы создаём новый Zero Block, выставляем необходимую высоту, размещаем нужный контент, фиксируем каждый элемент и меняем Hidden на Visible. Это означает, что весь контент находится в Zero Block и будет виден на всех блоках. Давайте рассмотрим каждый этап более подробно.

Первым делом, как обычно, создаём новый Zero Block и удаляем всё лишнее.

Далее выставляем нужную высоту блока и удаляем фон.

Меняем Hidden на Visible. Для этого переходим в пункт Position and overflow.

Добавляем в наш блок Shape (Фигура) и устанавливаем следующие параметры: ширина и высота — 100%. Меняем Grid Container на Window Container и выравниваем по центру.

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

Что делаем дальше. Каждому элементу присваиваем параметр Visible, чтобы при скролле пункты меню оставались фиксированными. Для этого переходим в пункт Basic Animation и в разделе Fixing выбираем on Window Top.

Далее выбираем пункт Trigger Offset и задаём для каждого пункта высоту. Для этого копируем значение по оси Y и вставляем его в Trigger Offset.

Затем выбираем пункт Distance и ставим максимальное значение — 20-30 тысяч пикселей.

Теперь нам нужно вставить код. Для этого сохраняем наше меню и добавляем блок Т123, который находится в разделе Другое. Переходим в блок Т123, кликаем по вкладке Контент и вставляем наш код. В самом коде необходимо указать ID блока с меню.

После того как вставили ID блока, сохраняем и проверяем. Если всё сделали правильно, наше меню будет работать.

<style>

/* rec00000000 нужно заменить на номер блока, выполняющего роль меню */ #rec796115538 {

width: 100%;

position: fixed;

top: 0;

z-index: 9997; }

</style>