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

1. Добавляешь в Зеро-блок любой элемент, который будет служить кнопкой в меню (текст, шейп, картинка или кнопка). И указываешь ему тот же class, что и в генераторе (например, menu-nolim). Если тебе нужно, чтобы меню второго уровня открывалось на нескольких кнопках, то один и тот же класс, необходимо прописать на всех элементах.

Чтобы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь class.

2. Для кнопки выполняющей роль раскрытия меню второго уровня, укажи ссылкой id блока, который будет раскрываться.

3. Далее, в генераторе указываешь:

• «id блока с меню» — id меню 1-го уровня;
• «id зеро блоков через запятую, которые используются для меню 2-го уровня» — это поле нужно заполнить, если при загрузке страницы видны скрытые блоки с меню 2-го уровня;
• «Class для открытия меню 2-го уровня» — который ранее прописал кнопке (например, menu-nolim);
• «Class для закрытия меню 2-го уровня» — этот класс (например, menuNolimClose068) нужно добавить элементам, при клике на которые меню 2-го уровня должно скрываться;
• «Показ меню по ховеру» — выбираешь требуется ли раскрытие меню при наведении;
• «Класс кнопок в меню, при наведении на которые меню 2-го уровня будет скрываться» — этот класс (например, hideMenuButton) нужно добавить элементам, при наведении на которые меню 2-го уровня должно скрываться (например, при наведении на пункт меню 1-го уровня с якорной ссылкой или с ссылкой на другую страницу).
• «Анимация скрытия/показа блока» — выбираешь необходимый вариант;
• «Скорость появления меню (мс)» — указываешь скорость анимации;
• «Z-index меню» — указываешь значение повыше (данный параметр отвечает будет ли видно меню над другими элементами);
• «Скрывать меню автоматически при переходе на якорную ссылку» — включи эту настройку чтобы меню 2-го уровня скрывалось при переходе на якорную ссылку;
• «Скрывать меню автоматически при скролле» — включи эту настройку, если нужно чтобы меню 2-го уровня скрывалось при скролле;
• «Затемнение фона» — выбери нужный вариант;
• «Отключить анимацию при переходе между блоками меню» — включи эту настройку, если нужно отключить анимацию;
• «Включить скролл меню на мобильных устройствах, если высота меню больше высоты экрана» — включи эту настройку, если высота блока меню 2-го уровня больше высоты экрана;
• + Добавить дополнительный отступ (px) — можешь добавить отступы для разных разрешений экрана.

4. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;

Имей в виду:

• Обязательно заполнить поля «id блока с меню», «Class для открытия меню 2-го уровня», «Скорость появления меню (мс)», иначе меню 2-ого уровня не будет работать;
• Модификация работает совместно с модификациями поиска и фиксацией Зеро блока от Нолим;
• Не ставь ограничение видимости для меню 2го уровня. Если нужно показывать разные меню на разных разрешениях — делай разные кнопки в зеро блоке и скрывай их на разных экранах;
• Если у тебя несколько блоков, которые выполняют роль меню 2го уровня, не нужно вставлять несколько кодов, используйте один;
• Кнопка для вызова меню 2 уровня не должна находится в «узкой» полоске под основным меню. Основное меню должно быть цельным, в таком случае меню 2 уровня будет появляться под основным меню;
• Если высота меню из Зеро-блока будет 0 пикселей, меню 2го уровня будет появляться в самом верху страницы;
• Если у тебя несколько меню, одно статичное, другое фиксированное или одно для ПК, другое для мобильной версии, в таком случае нужно сделать дубликат меню 2го уровня и настроить их отдельно;
• Не работает с блоками: ME601, ME601A, ME601B