Бургер-меню в Zero Block: собираем своё

Бургер-меню в Zero Block из коробки закрывает большинство задач: пара пресетов анимации, настройка цвета и позиции иконки через панель. Но как только в проекте появляется двухуровневое меню, иконки соцсетей внутри списка или анимация, которой нет в стандартных настройках, панель упирается в потолок. За последние два года я собирал кастомное бургер-меню для Zero Block больше десятка раз - на лендингах, в интернет-магазинах на Tilda и на одностраничниках с формой заявки. Ниже - рабочая последовательность: где искать структуру меню, как её переверстать и на чём обычно спотыкаются при доработке.

Зачем переделывать штатное бургер-меню Zero Block

Штатное меню Zero Block умеет три-четыре варианта анимации открытия (fade, slide, push), позволяет менять шрифт, цвет фона и иконки, задавать позицию - слева или справа. На этом гибкость заканчивается. Нельзя добавить вложенные подпункты второго уровня, нельзя привязать открытие к скроллу или к клику по другому элементу, нельзя вставить в список меню что-то кроме ссылок - ни форму подписки, ни блок с номером телефона и иконками соцсетей.

Показательный случай из практики: лендинг с каталогом из шести направлений услуг, для каждого - три-четыре подпункта. Стандартное T‑меню такую вложенность просто не поддерживает, пришлось верстать список руками поверх штатной иконки-бургера. Похожая история с интернет-магазинами: клиент просит вывести в мобильном меню кнопку «Написать в WhatsApp» отдельным блоком под списком разделов - без кастомной разметки это не решить.

Из чего состоит структура T‑меню в Zero Block

Прежде чем переделывать, стоит открыть инспектор браузера и посмотреть, что генерирует Zero Block. Иконка-бургер обычно сидит в контейнере с классом t-menu__icon-container, сама иконка - t-menu__icon, у неё есть модификатор t-menu_active, который вешается при открытии. Список пунктов - t-menu__list, каждый пункт - t-menu__list-item со ссылкой t-menu__link внутри.

За поведение меню отвечает встроенный скрипт Tilda - он же слушает клик по иконке, переключает класс на теле документа и управляет прокруткой. Если добавить собственную разметку рядом, не отключив этот скрипт, получится классический конфликт: два меню реагируют на один клик, а на мобильном экран прыгает.

Практический вывод: кастомное меню либо полностью заменяет штатное (иконку и список скрываем через CSS, свою логику вешаем на новый элемент), либо использует чужую иконку, но с полностью своим JS-обработчиком. Я обычно иду по первому пути - он предсказуемее и не зависит от обновлений виджета Zero Block.

Верстаем кастомное бургер-меню - HTML и CSS

Разметку добавляю через Zero Block элемент «Код» (T123) в самом верху блока с шапкой - так она гарантированно окажется поверх остального контента по z‑index. Базовая структура:

<div class="custom-burger" id="customBurger">
 <span></span>
 <span></span>
 <span></span>
</div>
<nav class="custom-burger-menu" id="customBurgerMenu">
 <ul>
 <li><a href="#rec540">О компании</a></li>
 <li><a href="#rec612">Услуги</a>
 <ul class="submenu">
 <li><a href="#rec613">Разработка</a></li>
 <li><a href="#rec614">Поддержка</a></li>
 </ul>
 </li>
 <li><a href="#rec700">Контакты</a></li>
 </ul>
</nav>

Цифры в href - это ID записей (rec) конкретной страницы, их видно в адресной строке при клике на якорь в редакторе Tilda. Стили для иконки и панели:

.custom-burger {
 position: fixed;
 top: 20px;
 right: 20px;
 width: 32px;
 height: 24px;
 z-index: 1000;
 cursor: pointer;
}
.custom-burger span {
 display: block;
 height: 2px;
 background: #1a1a1a;
 margin-bottom: 7px;
 transition: transform .3s ease, opacity .3s ease;
}
.custom-burger-menu {
 position: fixed;
 top: 0;
 right: -320px;
 width: 320px;
 height: 100%;
 background: #fff;
 transition: right .35s ease;
 z-index: 999;
 overflow-y: auto;
}
.custom-burger-menu.is-open {
 right: 0;
}

Штатную иконку и список Zero Block при этом прячу через display: none у .t-menu__icon-container и .t-menu__list - сам блок меню (обёртку и логотип) не трогаю, он остаётся на месте.

JS-логика открытия и анимации бургер-меню

Логика простая: клик по иконке добавляет класс, класс двигает панель и превращает три полоски в крестик. Никаких сторонних библиотек не подключаю - 20 строк ванильного JS решают задачу быстрее, чем настройка готового плагина.

document.addEventListener('DOMContentLoaded', function () {
 var burger = document.getElementById('customBurger');
 var menu = document.getElementById('customBurgerMenu');

 burger.addEventListener('click', function () {
 burger.classList.toggle('is-active');
 menu.classList.toggle('is-open');
 document.body.style.overflow = menu.classList.contains('is-open') ? 'hidden' : '';
 });

 document.addEventListener('click', function (e) {
 if (!menu.contains(e.target) && !burger.contains(e.target)) {
 burger.classList.remove('is-active');
 menu.classList.remove('is-open');
 document.body.style.overflow = '';
 }
 });

 document.addEventListener('keydown', function (e) {
 if (e.key === 'Escape') {
 burger.classList.remove('is-active');
 menu.classList.remove('is-open');
 document.body.style.overflow = '';
 }
 });
});

Анимация иконки в крестик

За превращение трёх полосок в крестик отвечает CSS-класс is-active на контейнере иконки - верхняя полоска поворачивается на 45 градусов и сдвигается вниз, средняя гаснет через opacity: 0, нижняя поворачивается на ‑45 градусов. Такая анимация читается понятнее пользователю, чем резкая замена иконки, и не требует SVG-спрайтов.

Закрытие по клику вне меню и по Esc

Эту часть логики часто упускают при быстрой доработке, а без неё меню на планшетах и десктопах выглядит недоработанным - пользователь кликает мимо панели и ждёт, что она закроется, а она висит. Обработчик клика по document с проверкой contains закрывает этот пробел, а Escape полезен для доступности при работе с клавиатуры.

Адаптация под мобильные и разные разрешения

На iOS Safari высота экрана меняется при появлении адресной строки, и панель на height: 100% может обрезаться снизу или, наоборот, оставлять пустую полосу. Рабочий обход - задавать высоту через height: 100dvh с фолбэком на 100vh для старых версий Safari:

.custom-burger-menu {
 height: 100vh;
 height: 100dvh;
}

Ширину панели на экранах уже 400px я обычно делаю не фиксированной в пикселях, а width: 85vw; max-width: 320px - иначе на бюджетных Android-телефонах с экраном 320px панель занимает весь экран впритык и выглядит криво. Проверяю поведение минимум на трёх точках: 375px (iPhone SE/13 mini), 414px (обычный Android) и 768px (планшет) - на 768px часто оказывается, что дизайнер рассчитывал десктопное меню, а не бургер, и переключение breakpoint нужно двигать.

Отдельно тестирую touch-события: клик по ссылке подменю на телефоне иногда не срабатывает с первого раза, если элемент слишком тонкий - минимальная высота кликабельной зоны в списке меню должна быть не меньше 44px, это стандарт для тач-интерфейсов.

Частые ошибки при кастомизации бургер-меню в Zero Block

Если задача типовая - простое двухуровневое меню без сложной анимации, - быстрее не изобретать разметку заново, а взять готовый шаблон и адаптировать под свою структуру записей: у меня в библиотеке готовых скриптов уже есть проверенные варианты под Zero Block, которые экономят пару часов вёрстки.

Ещё одна ошибка - тестировать только в редакторе Tilda. Превью редактора не всегда честно показывает поведение фиксированных элементов и скролла, особенно на мобильной версии. Проверяю финальный результат только на опубликованной странице, в реальном браузере телефона.

Частые вопросы

Можно ли сделать бургер-меню в Zero Block без кода, только настройками панели?

Для одноуровневого списка ссылок с базовой анимацией - да, панели хватает. Как только нужны вложенные пункты, кастомные элементы внутри списка или нестандартная анимация иконки, без HTML/CSS/JS через блок «Код» не обойтись.

Как отключить штатное меню Zero Block, чтобы не было конфликта с кастомным?

Штатный JS-обработчик Tilda трогать не нужно - проще скрыть визуальные элементы через CSS (display: none для иконки и списка меню), оставив контейнер и логотип на месте. Тогда скрипт Tilda продолжает работать, но невидимо, и не конфликтует с новой панелью.

Почему бургер-меню не открывается на мобильных после кастомизации?

Чаще всего причина в порядке подключения скрипта - код в блоке T123 срабатывает до того, как элементы с нужными ID появились в DOM. Оборачивайте логику в DOMContentLoaded, как в примере выше, и проверяйте в консоли браузера на телефоне, что ID элементов совпадают с теми, что в разметке.

Сколько стоит доработка бургер-меню под индивидуальный дизайн?

Если меню - часть более крупной доработки сайта, ориентируйтесь на комплексную интеграцию. Точную оценку даю после просмотра макета и структуры страницы - сложность зависит от количества уровней вложенности и анимаций.