Модификация позволяет создавать кастомные хэдеры на основе Zero-блоков — с фиксацией, многоуровневым меню, меню-бургером и множеством других настроек.
Как работает модификация
Хэдер из Zero-блока
Фиксированная часть .uc-header закрепляется в верхней части экрана через position: fixed. Модификация управляет её видимостью в зависимости от заданных параметров:
- hideonscroll и showonscroll задают расстояние в пикселях, которое нужно проскроллить от текущей точки, чтобы хэдер скрылся или появился снова. Направление задаётся знаком значения: положительный hideonscroll скрывает хэдер при прокрутке вниз, отрицательный — при прокрутке вверх; для showonscroll наоборот — положительный показывает хэдер при прокрутке вверх, отрицательный — при прокрутке вниз. При прохождении указанного расстояния текущая точка расчёта обновляется;
- showoffset устанавливает высоту в пикселях, до которой хэдер всегда скрыт. Это необходимо, когда в начале страницы существует статичный блок с хэдером: чтобы избежать наложения на него фиксированного хэдера, он скрывается и появляется только при прокрутке вниз.
Появление и скрытие шапки происходит за счёт сдвига через transform: translateY(). Размер сдвига вычисляется на основе действующей высоты блока с хэдером, а скорость и тип перехода регулируется в настройках с помощью параметров transition и easing.
Модификация поддерживает определение активной страницы. Для этого элементам навигации задаются ссылки и присваивается класс .page. Если текущая страница совпадает с указанным адресом, активному пункту меню присваивается класс .current. При наведении на пункт меню, ему присваивается класс .hover.
Выпадающее меню
Выпадающее меню .uc-submenu закрепляется в верхней части экрана так же, как и основной хэдер, но учитывает сдвиг по оси Y на высоту хэдера. Разворачивается при наведении на триггерный шейп .submenu.
Как и хэдер, поддерживает определение активной страницы для элементов с классом .page. Если адрес текущей страницы совпадает со ссылкой в настройках элемента, ему присваивается класс .current и применяются стили, указанные в настройках модификации. При наведении на ссылку, по которой должно открываться выпадающее меню, ей так же присваивается класс .hover.
Выпадающих меню может быть несколько. Их порядок регулируется слоями: первому (нижнему) элементу .submenu соответствует первый Zero-блок .uc-submenu.
Меню-бургер
Меню-бургер представляет из себя отдельный блок, появляющийся на странице при клике на элемент со ссылкой #menu и скрывающийся по ссылке #menu-close. Работает так же, как поп-ап T1093, но может раскрываться как на весь экран, так и оставлять хэдер видимым, добавляя сдвиг на расстояние, равное его высоте.
Поддерживает определение активной страницы для ссылок .page и имеет несколько анимаций раскрытия, которые можно настроить через параметр animation.
Поиск по сайту
Модификация встраивает стандартный блок поиска T838 с классом .uc-search в шейпы .search в хэдере, меню и других блоках страницы. Поля поиска переносятся во все контейнеры с заданным классом и раскрывают выпадающее окно с результатами под хэдером с учётом его высоты.
Начало работы
Установка библиотеки
Для работы хэдера необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией хэдера. Подробнее: Синхронизация обновлений в модификациях
Дальнейшая настройка производится по инструкции к каждому из вариантов:
Элементы
Ниже приведены элементы, из которых состоит Zero-хэдер. Они задаются и настраиваются в интерфейсе Тильды.
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой хэдера. Подгружаются асихнронно как функции объекта header.
В качестве аргументов для настройки кастомного хэдера передаются следующие параметры:
Хэдер из Zero-блока:
Стили
В params.style можно передавать стили хэдера и его компонентов. Они преобразовываются в css-переменные и отображаются при запуске мода.
Активный пункт меню
Модификация позволяет выделять цветом активный пункт меню. Через параметр linking.mode можно указать, по какому принципу будет выделяться активная страница:
exact – точное соответствие. Например, у кнопки ссылка /mods, и вы находитесь на страничке /mods, тогда она подсветится, как активная. Данный режим устанавливается по-умолчанию при инициализации хэдера.
fuzzy – совпадение по началу строки. Если у кнопки ссылка /mods, а вы на странице /mods/docs, то она подвсетится, как активная, так как тоже начинается с /mods:
header.init(".uc-header", { linking: { mode: 'fuzzy' } })path – совпадение по уровню вложенности, который регулируется через параметр linking.levels. Если задать проверку по 2-му уровню вложенности, то кнопка /mods/docs станет активной на странице /mods/docs и на всех вложенных страницах (например, /mods/docs/basics). Но останется неактивной на страничках /mods и /mods/support.
header.init(".uc-header", { linking: { mode: 'path', levels: 2 } })С помощью этих правил можно более точно регулировать подсветку активных пунктов в меню.
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить хэдер по срабатыванию события
Отложить инициализацию хэдера можно с помощью параметров 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 и нижней границей хэдера образуется пустое пространство. При попадании курсора в эту область, триггерный элемент перестаёт быть активным, и выпадающее меню скрывается.
Для устранения проблемы рекомендуется растянуть триггерный элемент по всей высоте хэдера или прижать его к нижней границе блока.
Выпадающие меню закрываются с задержкой
Проблема может возникать из-за принудительной фиксации Zero-блока в его настройках, а также указания ему кастомного z-index. Для решения проблемы эти значения в редакторе лучше удалить – модификация устанавливает их автоматически.
Если модификация все равно не работает
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению. Данная функция работает на любом сайте с установленной библиотекой.
