Недавно столкнулась с проблемой создания третьего уровня в меню в Zero Block. В стандартных блоках тильды есть лишь двухступенчатое меню в блоке МЕ601А и третий уровень есть в блоке МЕ601В, но у моего клиента по задумке меню должно быть более красочным и интересным, поэтому идея использовать стандартные блоки сразу отпала.

Сразу скажу, если вас не особо заботит внешний вид выпадающего меню, ставьте стандартный блок МЕ601В. Тот путь, что я опишу ниже будет немного сложным, но в целом достаточно понятным. Я не кодер, я уверена, что есть возможность упростить тот код, что я напишу ниже, но я в этом не разбираюсь. Можете спокойно его сами менять, я на этот код не претендую, я его написала через GPT, и он рабочий. Я даю вам идею, а брать ее 1 в 1 или изменять — дело уже ваше.

Такое меню с тремя уровнями у меня получилось в итоге

Стандартные блоки, которые предлагает Тильда

Обычное двухступенчатое меню делается очень легко, на кнопки триггеры в первом уровне меню назначаем через # якорь, который откроет нам второй уровень.

1) Создаем наш второй уровень в обычном зеро блоке, при необходимости убираем ему фон и назначаем overflow: visible (в русскоязычной версии Тильды "Оверфлоу: показать" Zero Block в попапе.

Шаг 2 и Шаг 3 делать строго в конце всего нашего пути! (после создания третьего уровня)
2) Далее добавляем стандартный блок Т1093 Попап: Зеро блок в попапе.

3) Назначаем ID зеро блока второго уровня, которое мы создали в первом шаге и назначаем ссылку на pop-up, которую мы указывали в первом уровне нашего меню.

Далее в настройках зеро блока в попапе нужно указать открытие по ховеру (наведению). Вы можете поставить и по клику, но с точки пользовательского опыта, люди предпочитают видеть открытое меню при наведении. Это уже устоявшееся правило, которое нет смысла менять, оно реально удобное.

Проблема состоит в том, что нельзя просто создать еще один зеро с третьим уровнем и так же проделать весь путь как и со вторым уровнем. Эти попапы будут наслаиваться друг на друга, вы только потратите время на создание третьего уровня.

Идея была через стандартные тильдовские тултипы, кто бы мог подумать!
Проще, было сделать через какой-нибудь код в стиле "тултипы в зеро", но все найденные мной коды были не доработаны и изменять их я не хотела. Недоработка состояла в том, что когда я убирала мышку с триггера на сам тултип (т.е в моем случае это меню третьего уровня, нам оно нужно кликабельное) он исчезал!

Я решила воспользоваться стандартным тильдовским тултипом в зеро. Но с ним тоже не все так просто. Его тяжело кастомизировать в самой тильде, пришлось прибегнуть к коду.

Триггер тултипа (далее просто триггер) может быть лишь кружочком, цвет которого можно поменять. Ну и есть возможность поместить внутрь кружка картинку, не слишком много возможностей.

Вот так выглядит тултип в самом блоке с настройкой в тильде

Мне же нужно сделать так, чтобы:

• триггер стал прозрачным ректанглом, который закроет собой иконку, стрелку-галочку и текст второго уровня. Чтобы при наведени на весь этот пункт меню появлялся как раз наш третий уровень.
• тултип с текстом должен прилегать к триггеру по правой стороне, но не посередине, а так, чтобы выравнивание было у триггера и тултипа по верху.

Кстати максимальная длина тултипа с текстом 320px, мне нужно чуть больше, чтобы меню было все по сетке. Это мы тоже поменяем

1) Меняем стиль триггера (красного кружка), делаем его ректанглом (прямоугольником). Я указала длину 395px и высоту 25px. Такого размера у меня и должна быть эта кнопка. Прозрачность устанавливаю просто в настройках зеро блока

<style>
/* Стили для триггера тултипа */
.t396__elem[data-elem-type="tooltip"] {
width: 395px !important;
height: 25px !important;
border-radius: 0 !important;
cursor: pointer !important;
}
</style>

2) Меняем стиль тултипа. Мне нужно сделать его шире, чем позволяем тильда. Поэтому я сделала его 410px. Чтобы текст тоже был во всю длину тултипа вставила код и для текста. Цвет вы можете поменять в настройках тултипа.
border-radius: 10px !important - скругление углов

<style>
/* Стили для тултипа */
.tn-atom__tip {
width: 410px !important;
height: 25px
border-radius: 10px !important;
overflow: visible;

}
/* Стили для текста тултипа */
.tn-atom__tip-text {
max-width: 410px !important;
overflow: visible;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

Сейчас у нас тултип стоит криво (из-за выравнивания по центру) Нужно сделать выравнивание по верхнему краю и назначить расстояние слева. Так как мой триггер размером 395px (он прозрачный и чуть длиннее голубого шейпа) я делаю расстояние слева тоже 395px. Если сделать 0px, то он будет буквально на триггере, а не справа от него.

Если в вашей задумке третий уровень не справа, а, допустим, снизу, то указывайте не left, а top.

<style>
/* Убираем отступ между триггером и тултипом */
.tn-atom__tip {
margin: 0 !important;
padding: 0 !important;
top: 0 !important;
left: 390px !important;
transform: none !important;
}
</style>

Появилась проблема, текст прилип к своему контейнеру, надо указать отступы от краев

Здесь видно, что текст третьего уровня прилип к своему контейнеру

/* Добавляем отступы от краев*/
<style>
.tn-atom__tip-text {
padding: 10px !important;
}
</style>

Проблема с отступами решена, теперь наше меню третьего уровня выглядит так:

Если у вас нет шейпов с подсветкой, то в целом ваше меню готово, поздравляю! Осталось только добавить ссылки через доп. меню, которое появляется при выделении текста и все!

Вы молодцы!

Если же у вас есть такая подсветка, вы заметите, что время исчезания тултипа при отведении мышки с триггера, например на другой пункт меню, разнится! На долю секунды, но разнится. Здесь есть сложность, потому что если ваше меню третьего уровня cостоит из большого количества пунктов, вам потребуется время.

Есть код для того, чтобы сократить время ИСЧЕЗАНИЯ тултипа:

/* Изменение времени скрытия тултипа*/
<script>
document.addEventListener('DOMContentLoaded', () => {
const selectors = [
'.tn-elem__11938146211754259831784',
'.tn-elem__11938146211754259836579',
'.tn-elem__11938146211754259839896',
'.tn-elem__11938146211754259010431'
];

selectors.forEach(selector => {
const trigger = document.querySelector(selector);
if (!trigger) return;

const tooltip = trigger.querySelector('.tn-atom__tip');
if (!tooltip) return;

let timeout;

function showTooltip() {
clearTimeout(timeout);
tooltip.style.opacity = '1';
tooltip.style.pointerEvents = 'auto';
}

function hideTooltip() {
timeout = setTimeout(() => {
tooltip.style.opacity = '0';
tooltip.style.pointerEvents = 'none';
}, 0);
}

trigger.addEventListener('mouseenter', showTooltip);
trigger.addEventListener('mouseleave', hideTooltip);
tooltip.addEventListener('mouseenter', showTooltip);
tooltip.addEventListener('mouseleave', hideTooltip);

// Начальное состояние тултипа
tooltip.style.transition = 'opacity 0s ease-in-out';
tooltip.style.opacity = '0';
tooltip.style.pointerEvents = 'none';
});
});
</script>

В нем нужно назначить все свои триггеры, которые выглядят как
"'.tn-elem__11938146211754259831784"

Где такое найти:
Нажимаем F12, откроется панель с кодом. Нажимаем на такую стрелочку для выбора элемента на странице.

Далее наводим на наш триггер, он прозрачный, но вы знаете, где он находится. Нажимаем на него.

В коде справа мы видим, как выделился участок, но нам нужна часть выше (именно предыдущая, над выделенной), где находится класс этого элемента (там много цифр). Копируем ее и вставляем вместо моих данных в коде. Проделываем это со всеми триггерами, которые должны вызывать тултип (меню третьего уровня).

Далее вернитесь к шагу 2 и 3 с самого начала статьи и все! Наше меню готово. Если вы что-то не поняли в статье, можете написать мне в Telegram, я с радостью помогу вам разобраться!