Как собрать своё меню в Zero Block и не потерять мобильную версию
Если подходит стандартная структура, берите родное меню Тильды: в её рантайме есть отдельный многоуровневый модуль и мобильный сценарий. Своё меню в Zero Block оправдано необычной композицией, но тогда дизайнер отвечает не только за появление списка. Нужны кнопка с состоянием, клавиатура, закрытие снаружи, мобильная высота и понятный второй уровень.
Короткий ответ
Начните с родного блока. Если макет требует Zero Block, проектируйте меню как интерфейс, а не как анимацию двух групп.
Где заканчивается готовое меню
Код родных меню знает активную ссылку, смещение, подменю и мобильный переход по
уровням. Но в исследованном наборе он не ищет элементы .t396 и .tn-elem.
Произвольная композиция Zero Block не получает эту механику автоматически.
Это хорошая граница: родное используем там, где важнее надёжность, своё — там, где композиция действительно влияет на задачу.
Минимальная структура своего меню
Нужна настоящая кнопка открытия с aria-expanded, контейнер списка и ссылки.
Для второго уровня — отдельные кнопки, а не ссылка, которая одновременно должна
и перейти, и раскрыть. При закрытии возвращайте фокус на кнопку.
Обязательные сценарии:
- клик и касание;
- Enter, Space и Escape;
- закрытие по клику снаружи;
- прокрутка длинного списка;
- поворот телефона;
- несколько меню без общих id.
Частая ошибка Zero Block
На одном адаптиве группа скрыта, но её интерактивные ссылки остаются доступными клавиатуре. Визуально меню закрыто, а Tab ходит по невидимым пунктам. Скрывать нужно не только прозрачностью: закрытая панель должна исчезнуть из навигации.
Про MOD-022
«Меню, которое схлопывается в точку» — отдельный визуальный сценарий, а не универсальная замена родного меню. MOD-022 уже собран: он добавляет компактное состояние после заданной глубины прокрутки, а открытие и закрытие самого меню оставляет штатной логике выбранного блока.