На уровень 2
Просто кнопка
Просто кнопка
На уровень 3
Просто кнопка
Просто кнопка
Назад на уровень 1
Просто кнопка
Просто кнопка
Просто кнопка
Назад на уровень 2

Многоуровневое меню из Zero block в Tilda

Делаем многоуровневое меню в zero block tilda при помощи пошаговой анимации и небольшого кода
Многоуровневое меню из Zero block в Tilda
В данной статье я расскажу, как реализовать многоуровневое меню в Tilda, с помощью Zero block и небольшого кода. В данное меню вы можете добавлять сколько угодно уровней, в примере я использовал 3 уровня вложенности. Сам пример вверху страницы.

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

Шаг 1

  1. Создаём Zero block с той высотой, которой будет ваша шапка меню (в примере 80px на десктопе, 60px на мобильных);
  2. Ставим логотип, нужную информацию;
  3. Создаем кнопку открытия (можете использовать картинку, shape или кнопку, в моем примере кнопка без текста, поверх лежат 3 shape по 2px высотой и pointer events:none);
Своя кнопка вызова меню в тильде

Шаг 1

  1. Создаем shape, который будет фоном первого уровня меню;
  2. Создаем ссылки меню;
  3. Перемещаем shape за область видимости window контейнера;
    В примере ширина меню 400px, соответственно я убрал shape на -400px, кнопки выровнял относительно него.
  4. Присваиваем shape css class nav-block ;
Триггер вызова для многоуровневого меню в тильда

Шаг 2

Настраиваем пошаговую анимацию:
  1. Анимация по клику для shape и пунктов меню;
  2. Триггер - кнопка открытия меню;
  3. Выставляете время анимации (в примере 0.3с);
  4. Выбираете параметр "движение по оси X";
  5. Ставите значение -400px;
    Наше меню находится на - 400px, соответственно кликом, мы должны переместить его на 400px в область видимости.
Для пунктов меню и фона параметры анимации одинаковые и один и тот же триггер - кнопка открытия меню.
Триггер пошаговой анимации для многоуровневого меню в тильда меню

Шаг 3

Создаем второй уровень:
  1. Копируем shape и кнопки, чтобы сохранились значения анимации;
  2. В триггер анимации ставим:
    2.1. Пункт меню первого уровня, который ведет на второй уровень.
Пункт меню для вызова второго уровня многоуровневого меню в тильда

Шаг 4

Создаем третий уровень по аналогии со вторым:
  1. Копируем shape и кнопки, чтобы сохранились значения анимации;
  2. В триггер анимации ставим:
    2.1. Пункт меню второго уровня, который ведет на второй уровень.
  3. Создаем кнопку назад, которая закроет данный слой, чтобы вернуться в предыдущее меню.
  4. Цепляем эту кнопку триггером для слоя и остальных пунктов меню данного уровня.
Таким образом вы можете делать хоть по 10 слоев вложенности для каждого пункта меню.

Шаг 5

Создаем кнопку закрытия меню:
  1. Добавляем иконку закрытия;
  2. Добавляем ее, как триггер в анимацию, для всех слоев и объектов, а так же для самой себя (т.е. она так же скрывается по нажатию на саму себя);
  3. Кнопку ставим на верхний слой.

Шаг 6

Создаем слой затемнения, при клике на который меню закроется:
  1. Добавляем shape;
  2. Прозрачность 50%;
  3. Ставим ширину 100% по window container;
  4. Убираем его вверх, ставим над шапкой, задаем высоту 1280px;
  5. В слоях ставим его под меню 1-го уровня;
  6. Добавляем его, как триггер анимации ко всем слоям, а так же на самого себя
  7. Присваиваем ему css class nav-block ;
Анимация слоя затемнения:
  1. Первый шаг:
    0с;
    Движение по оси Y на 1280px;
    Прозрачность 0;
  2. Второй шаг:
    0.2c;
    Предыдущие параметры остаются (т.е. мы заменили только время):
  3. Третий шаг:
    Все предыдущие параметры оставляем, меняем только непрозрачность на 100%.
Т.е. у вас получится 3 шага анимации, первый 0 сек, остальные по 0.2 сек.
Настройки пошаговой анимации для многоуровневого меню в zero block tilda

Сверим триггеры анимации

Ниже скриншоты с триггерами слоев меню, в целом, там ничего сложного, просто выставляйте их по логике, при нажатии на какую кнопку у вас должен скрываться или появляться тот или иной блок или слой.
Список триггеров для 1го уровня меню
Список триггеров для 1го уровня меню
Список триггеров для 2го уровня меню
Список триггеров для 2го уровня меню
Список триггеров для 3го уровня меню
Список триггеров для 3го уровня меню

Шаг 7

  1. Создаем на странице блок T123 и вставляем в него код, который расположен ниже;
  2. В коде заменяем id zero блока на свой.
<!-- многоуровневое меню в tilda | anku.im/blog/multilevel-nav-on-zero-block-tilda -->
<style>
/*замените id вашего zero block*/
    #rec294601786 {
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
    }
    .nav-block {
        height:100vh!important;
    }
</style>
Если возник вопрос, задайте его в комментариях или через форму внизу страницы.
Не забудьте поделиться записью в соцсетях:)
AnKu
Тот, кто пишет
Нужен видео разбор?
Не нашли что искали?
Напишите свой вопрос или предложение через форму ниже
Понравился материал? Поблагодари проект!
Made on
Tilda