Модификация позволяет создавать кастомные хэдеры на основе 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-хэдер. Они задаются и настраиваются в интерфейсе Тильды.
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой хэдера. Подгружаются асихнронно как функции объекта header.
В качестве аргументов для настройки кастомного хэдера передаются следующие параметры:
Хэдер из Zero-блока:
Выпадающее меню из Zero-блока:
Меню-бургер из Zero-блока:
Стили
В params.style можно передавать стили хэдера и его компонентов. Они преобразовываются в css-переменные и отображаются при запуске мода.
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить хэдер по срабатыванию события
Отложить инициализацию хэдера можно с помощью параметров event и timeout. Например, запустить модификацию через 100ms после срабатывания customEvent можно таким образом:
Отложить инициализацию хэдера можно с помощью параметров event и timeout. Например, запустить модификацию через 100ms после срабатывания customEvent можно таким образом:
header.init(".uc-header", { event: "customEvent", timeout: 100 })Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки хэдера
Если код нужно выполнить после того, как хэдер и его компоненты запустятся, добавьте слушатель события headerinit:
Если код нужно выполнить после того, как хэдер и его компоненты запустятся, добавьте слушатель события headerinit:
window.addEventListener("headerinit", function(){ /*...*/ })Запустить другую модификацию после отрисовки хэдера
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить аккордеон после отрисовки хэдера можно через событие headerinit:
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить аккордеон после отрисовки хэдера можно через событие 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, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.