Документация — модификации для Zero-блоков
2025-09-07 18:38

Шапка и меню из Zero-блоков

Модификации
Хэдер из Zero-блоков
Документация
10 минут
Модификация позволяет создавать кастомные хэдеры на основе Zero-блоков — с фиксацией, многоуровневым меню, меню-бургером и множеством других настроек.

Как работает модификация

Общие механики

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

Хэдер из Zero-блока

Фиксированная часть .uc-header закрепляется в верхней части экрана через position: fixed. Модификация управляет её видимостью в зависимости от заданных параметров:
  • hideDistance регулирует, на какое количество пикселей нужно проскроллить страницу от текущей точки, чтобы хэдер скрылся. При скролле вверх более, чем на 20px, хэдер появляется, а текущая точка для расчетов обновляется;
  • hideOffset устанавливает высоту в пикселях, до которой хэдер всегда скрывается. Это необходимо, когда в начале страницы существует статичный блок с хэдером: чтобы избежать наложения на него фиксированного хэдера, он скрывается и появляется только при прокрутке вниз.
Появление и скрытие шапки происходит за счёт сдвига через transform: translateY(). Размер сдвига вычисляется на основе действующей высоты блока с хэдером, а скорость и тип перехода регулируется в настройках с помощью параметров transition и easing.
Поддерживает определение активной страницы. Для этого элементам навигации задаются ссылки и присваивается класс .page. Если текущая страница совпадает с указанным адресом, активному пункту меню присваивается класс .current. При наведении на пункт меню, ему присваивается класс .hover.
Подробнее: Zero-хэдер с фиксацией

Выпадающее меню из Zero-блока

Меню второго уровня .uc-submenu закрепляется в верхней части экрана так же, как и основной хэдер, но учитывает сдвиг по оси Y на высоту хэдера. Раворачивается при наведении на триггерный шейп .submenu
Как и хэдер, поддерживает определение активной страницы для элементов с классом .page. Если адрес текущей страницы совпадает со ссылкой в настройках элемента, ему присваивается класс .current и применяются стили, указанные в настройках модификации. При наведении на ссылку, по которой должно открываться выпадающее меню, ей так же присваивается класс .hover.
Выпадающих меню может быть несколько. Их порядок регулируется слоями: первому (нижнему) элементу .submenu соответствовать первый Zero-блок .uc-submenu
Подробнее: Выпадающее меню из Zero-блока

Меню-бургер из Zero-блока

Меню-бургер представляет из себя отдельный блок, появляющийся на странице при клике на элемент со ссылкой #menu и скрывающийся по ссылке #menu-close. Работает так же, как поп-ап T1093, но может раскрываться как на весь экран, так и оставлять хэдер видимым, добавляя сдвиг на расстояние, равное его высоте.
Поддерживает определение активной страницы для ссылок .page и имеет несколько анимаций раскрытия, которые можно настроить через параметр animation.
Подробнее: Меню-бургер из Zero-блока

Начало работы

Установка библиотеки

Для работы хэдера необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>
Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией хэдера. Подробнее: Синхронизация обновлений в модификациях
Дальнейшая настройка производится по инструкции к каждому из вариантов:

Элементы

Ниже приведены элементы, из которых состоит Zero-хэдер. Они задаются и настраиваются в интерфейсе Тильды.
Элемент
Описание
Класс/Ссылка
Пункты меню
Текстовые элементы или кнопки, содержащие ссылку на внутренние страницы в формате /directory/page.
.page
Доп. элементы
Шейпы, иконки и др., относящиеся к пунктам меню. Используются в случаях, когда помимо самих ссылок необходимо изменять стили сопутствующих элементов. Их количество должно быть строго кратным количествам пунктов меню.
.page-elem
Кнопка выпадающего меню
Элемент, при наведении на который появится выпадающее меню. Рекомендуется устанавливать его высоту в 100% высоты хэдера, чтобы избежать случайного вывода курсора при открытии меню.
.submenu
* – обязательные элементы

Функции и параметры

Методы, с помощью которых можно управлять работой хэдера. Подгружаются асихнронно как функции объекта header.
Функция
Описание
Триггер
header.init(selector, params)
Инициализирует базовый функционал хэдера
Load Start
submenu.init(selector, params)
Инициализирует функционал выпадающего меню
DOM Content Loaded
menu.init(selector, params)
Инициализирует функционал меню-бургера
DOM Content Loaded
В качестве аргументов для настройки кастомного хэдера передаются следующие параметры:
Хэдер из Zero-блока:
Параметр
Описание
Тип
Значение по-умолчанию
selector
Класс фиксированного хэдера
string
–
params.hideDistance
Расстояние от текущей точки, после прокрутки на которое хэдер будет скрываться
number
–
params.hideOffset
Расстояние от начала страницы, после прокрутки на которое хэдер будет отображаться
number
–
params.hideDistanceMobile
Параметр hideDistance для мобильной версии (<480px)
number
–
params.hideOffsetMobile
Параметр hideOffset для мобильной версии (<480px)
number
–
params.pages
Класс ссылок на другие страницы
string
'.page'
params.elems
Класс доп. элементов для ссылок
string
'.page-elem'
params.transition
Скорость анимации
number
300
params.easing
Функция перехода для анимации
string
'ease-in-out'
params.style
Стили хэдера
object
{}
Выпадающее меню из Zero-блока:
Параметр
Описание
Тип
Значение по-умолчанию
selector
Класс выпадающих меню
string
–
params.link
Класс ссылок для открытия меню
string
'.submenu'
params.linkElems
Класс доп. элементов для ссылок открытия меню
string
'.submenu-elem'
params.pages
Класс ссылок на другие страницы
string
'.page'
params.elems
Класс доп. элементов для ссылок
string
'.page-elem'
params.transition
Скорость анимации
number
300
params.easing
Функция перехода для анимации
string
'
params.style
Стили выпадающего меню
object
{}
Меню-бургер из Zero-блока:
Параметр
Описание
Тип
Значение по-умолчанию
selector
Класс меню-бургера
string
–
params.pages
Класс ссылок на другие страницы
string
'.page'
params.elems
Класс доп. элементов для ссылок
string
'.page-elem'
params.open
Ссылка для кнопки открытия меню
string
'#menu'
params.close
Ссылка для кнопки закрытия меню
string
'#menu-close'
params.fullscreen
Раскрытие меню во весь экран
boolean
false
params.animation
Анимация раскрытия меню
string
'roll'
params.transition
Скорость анимации
number
300
params.easing
Функция перехода для анимации
string
'ease-in-out'
params.style
Стили меню-бургера
object
{}

Стили

В params.style можно передавать стили хэдера и его компонентов. Они преобразовываются в css-переменные и отображаются при запуске мода.
Параметр
Описание
Тип
Пример
active.color
Цвет текста активного пункта меню
string
'#FFFFFF'
active.backgroundColor
Цвет фона активного пункта меню
string
'#FFFFFF'
active.borderColor
Цвет бордера активного пункта меню
string
'#FFFFFF'
active.fontWeight
Жирность шрифта активного пункта меню
number
500
active.fontUnderline
Толщина подчеркивания активного пункта
number
1
hover.color
Цвет текста пункта меню при наведении
string
'#FFFFFF'
hover.backgroundColor
Цвет фона пункта меню при наведении
string
'#FFFFFF'
hover.borderColor
Цвет бордера пункта меню при наведении
string
'#FFFFFF'
link.color
Цвет текста кнопки выпадающего меню при наведении
string
'#FFFFFF'
link.backgroundColor
Цвет фона кнопки выпадающего меню при наведении
string
'#FFFFFF'
link.borderColor
Цвет бордера кнопки выпадающего меню при наведении
string
'#FFFFFF'
elems.opacity
Непрозрачность неактивных доп. элементов
number
0.2
blur
Размытие фона при открытии меню
number
0

События

Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить хэдер по срабатыванию события
Отложить инициализацию хэдера можно с помощью параметров event и timeout. Например, запустить модификацию через 100ms после срабатывания customEvent можно таким образом:
header.init(".uc-header", { event: "customEvent", timeout: 100 })
Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки хэдера
Если код нужно выполнить после того, как хэдер и его компоненты запустятся, добавьте слушатель события headerinit:
window.addEventListener("headerinit", function(){ /*...*/ })
Запустить другую модификацию после отрисовки хэдера
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить аккордеон после отрисовки хэдера можно через событие headerinit:
accordion.init(".uc-accordion", { event: "headerinit" })

Инициализация

Код инициализации хэдера вставляется в блок T123 после всех его компонентов или в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом:
<!--header.js Zero-хэдер с фиксацией. https://postnikovmd.com/mods/header-->
<script>header.init(".uc-header")</script>
<script>submenu.init(".uc-submenu")</script>
<script>menu.init(".uc-menu")</script>

Распространенные проблемы

При загрузке хэдер проявляется на некоторое время

Проблема связана с тем, что при загрузке страницы Тильда сначала отрисовывает блок, и только затем модификация его скрывает, что вызывает мерцание на доли секунд.
Для решения проблемы хэдер и его компоненты лучше поместить в конец страницы или добавить в неё блок T228 (плавная загрузка страницы).

Хэдер не скрывается при скролле

Такое может происходить, если у хэдера установлена нулевая или близкая к нулевой высота. Убедитесь, что она равняется физической высоте хэдера в пикселях, а сам блок не зафиксирован в настройках – модификация фиксирует его самостоятельно.

Не появляются выпадающие меню при наведении

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

Выпадающие меню сворачиваются слишком быстро

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

Если модификация все равно не работает

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=header, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.
Попробовать