Шапка и меню из Zero‑блоков
Позволяет создать кастомный хэдер из Zero-блоков с фиксацией, управлением по скроллу, выпадающими меню, меню-бургером, поиском и множеством других настроек
Хэдер с фиксацией в Zero-блоке
Инструкция по установке
- Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайтаЭтот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений включена. Модификации будут загружаться с альтернативного источника (для зарубежных проектов).
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
-
- Создайте Zero-блок с хэдером и присвойте ему класс .uc-headerФиксировать блок в настройках редактора и задавать ему z-index не нужно, модификация сделает это автоматически.
- Задайте ссылкам, указывающим на другие страницы, класс .page.Данный класс позволит выделять страницы при наведении или в активном состоянии. Если у них есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem. Они будут появляться только у активного пункта меню.
- Задайте в настройках модификации параметры и стили хэдера
- Скопируйте код и вставьте его в блок T123 в конец страницыДля плавной загрузки рекомендуется разместить хэдер и все его компоненты в конце страницы.
- Создайте блоки с выпадающими меню и присвойте им класс .uc-submenuФон этих блоков должен быть прозрачным. Если при раскрытии подменю у блока должно появляться затемнение, задайте фильтр в настройках фона и установите его высоту в 100% экрана. Фиксировать блок в настройках не нужно — модификация сделает это автоматически.
- Задайте элементам, по которым будут раскрываться подменю, класс .submenuЕсли таких элементов несколько, то первому (нижнему в слоях) элементу с такой классом будет соответствовать первый Zero-блок с выпадающим меню.
- Задайте ссылкам, указывающим на другие страницы, класс .page.Данный класс позволит выделять страницы при наведении или в активном состоянии. Если у них есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem. Они будут появляться только у активного пункта меню.
- Задайте в параметрах модификации параметры и стили выпадающих меню
- Создайте Zero-блок с меню и присвойте ему класс .uc-menuФон блока должен быть прозрачным. Если при раскрытии меню у блока должно появляться затемнение, задайте фильтр в настройках фона и установите его высоту в 100% экрана.
Фиксировать блок в настройках редактора не нужно — модификация сделает это автоматически. - Задайте ссылкам, указывающим на другие страницы, класс .page.Данный класс позволит выделять страницы при наведении или активном состоянии. Если у них есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem. Они будут появляться только у активного пункта меню.
- Добавьте на страницу кнопки открытия/закрытия меню: для кнопки открытия задайте ссылку #menu, для закрытия — #menu-closeЕсли вы хотите, чтобы меню раскрывалось на весь экран, переместите кнопку закрытия в блок с меню и поставьте галочку в настройках модификации напротив параметра «Раскрывать на весь экран».
- Задайте в настройках модификации параметры и стили меню
- Добавьте на страницу блок поиска T838 и присвойте ему класс .uc-searchДля работы блока разрешите поиск по сайту: Настройки сайта → Ещё → Разрешить внутренний поиск по сайту. Подробнее
- Задайте шейпам, в которых нужно разместить поиск, класс .searchПоле поиска T838 появится во всех элементах на странице с указанным классом
<!--header.js Zero-хэдер с фиксацией. https://postnikovmd.com/mods/header-->
<script>header.init(".uc-header", { hideonscroll: 360, style: { active: { color: "#FFFFFF", backgroundColor: "#2C2B31", borderColor: "#2C2B31", underline: 1 }, hover: { color: "#FFFFFF", backgroundColor: "#7F74F7", borderColor: "#7F74F7" } }, submenu: { style: { hover: { color: "#988FFF" }, link: { color: "#FFFFFF", backgroundColor: "#7F74F7", borderColor: "#7F74F7" } } }, menu: { fullscreen: true, animation: "fade", style: { active: { color: "#A3A3A4" }, hover: { color: "#988FFF" } } } })</script>Настройки модификации
Настройки модификации
Скорость и тип переходов:
Класс хэдера
Настройки поведения
Скрывать при прокрутке на
Отображать при прокрутке на
Дистанция появления
Настройки пунктов меню
Уровень вложенности
Цвет текста при наведении
Бордер при наведении
Фон при наведении
Фон активной страницы
Правила активной страницы
Бордер активной страницы
Стили текста активной страницы
Пользовательский z-index
Определяет уровень вложенности URL, по которому будет определяться активная страница (для правила «Совпадение по уровню вложенности»)
Пример: кнопка /mods/docs/header будет считаться активной при уровнях вложенности:
Пример: кнопка /mods/docs/header будет считаться активной при уровнях вложенности:
- 1 -> на странице /mods и всех вложенных страницах
- 2 -> на странице /mods/docs и всех вложенных страницах
- 3 -> на странице /mods/docs/header и всех вложенных страницах
Определяет, по какому принципу будет выделяться активная страница
Параметры:
Параметры:
- Точное соответствие -> кнопка со ссылкой /mods, будет считаться активной, если вы находитесь только на странице /mods
- Совпадение с началом строки -> кнопка со ссылкой /mods будет считаться активной, если вы находитесь на странице /mods и всех вложенных страницах
- Cовпадение по уровню вложенности -> кнопка со ссылкой /mods/docs будет считаться активной на странице /mods/docs и всех вложенных страницах, но останется неактивной на страницах /mods и /mods/support
Отображает хэдер только после того, как страница пролистывается на указанное количество пикселей.
Оставьте пустым, чтобы хэдер показывался по-умолчанию при загрузке страницы.
Оставьте пустым, чтобы хэдер показывался по-умолчанию при загрузке страницы.
Отображает хэдер, если страница пролистывается на указанное количество пикселей.
Если значение:
Если значение:
- Больше 0 -> хэдер отображается при прокрутке вверх
- Меньше 0 -> хэдер отображается при прокрутке вниз
- 0 -> хэдер всегда виден
- Не задано -> хэдер отображается при прокрутке вверх на 20px
Скрывает хэдер, если страница пролистывается на указанное количество пикселей.
Если значение:
Если значение:
- Больше 0 -> хэдер скрывается при прокрутке вниз
- Меньше 0 -> хэдер скрывается при прокрутке вверх
- 0 -> хэдер всегда скрыт
- Не задано -> хэдер всегда виден
<!--header.js Хэдер в Zero-блоке. https://postnikovmd.com/mods/header-->
<script>header.init(".uc-header")</script>Особенности
- Гибко настраиваемая логикаИмеет множество настроек и учитывает особенности Тильды
- Работает с автоскейломМод работает с масштабированием так же корректно, как и без него
- Поддерживает анимацииБазовые и SBS-анимации запускаются при взаимодействии с блоком
Документация
Элементы
Параметры
Стили
Распространенные проблемы
Проблема связана с тем, что при загрузке страницы Тильда сначала отрисовывает блок, и только затем модификация его скрывает, что вызывает мерцание на доли секунд.
Для решения проблемы хэдер и его компоненты лучше поместить в конец страницы или добавить в неё блок T228 (плавная загрузка страницы).
Для решения проблемы хэдер и его компоненты лучше поместить в конец страницы или добавить в неё блок T228 (плавная загрузка страницы).
Такое может происходить, если у хэдера установлена нулевая или близкая к нулевой высота. Убедитесь, что она равняется физической высоте хэдера в пикселях, а сам блок не зафиксирован в настройках – модификация фиксирует его самостоятельно.
Такое может происходить, если у хэдера установлена нулевая или близкая к нулевой высота. Так как модификация завязана на расчете высоты основного хэдера, её наличие является ключевым фактором для работы остальных компонентов.
Убедитесь, что высота Zero-блока с хэдером равняется его физической высоте в пикселях. Также проверьте, что триггерные элементы .submenu не перекрываются другими шейпами или блоками.
Убедитесь, что высота Zero-блока с хэдером равняется его физической высоте в пикселях. Также проверьте, что триггерные элементы .submenu не перекрываются другими шейпами или блоками.
Данная проблема возникает из-за того, что между триггерным элементом .submenu и нижней границей хэдера образуется пустое пространство. При попадании курсора в эту область, триггерный элемент перестаёт быть активным, и выпадающее меню скрывается.
Для устранения проблемы рекомендуется растянуть триггерный элемент по всей высоте хэдера или прижать его к нижней границе блока.
Для устранения проблемы рекомендуется растянуть триггерный элемент по всей высоте хэдера или прижать его к нижней границе блока.
Проблема может возникать из-за принудительной фиксации Zero-блока в его настройках, а также указания ему кастомного z-index. Для решения проблемы эти значения в редакторе лучше удалить — модификация устанавливает их автоматически.
Добавьте параметр? showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=header, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.
Подробная документация к модификации
Примеры использования, инструкции по установке и разбор наиболее распространенных ошибок
Больше возможностей с подпиской Pro
Cосредоточьтесь на дизайне и экономьте часы разработки. Без ограничений
Pro
Доступ к расширенным настройкам, сценариям и возможностям сервиса
550₽
4 500₽
t.me/postnikovmds
Присоединяйтесь к авторскому Telegram-каналу
Всё о возможностях библиотеки, модификациях и личном опыте
1K подписчиков
Присоединяйтесь к Telegram-каналу
Всё о возможностях библиотеки, новых модификациях и личном опыте
t.me/postnikovmds
Чат авторского канала о модификациях
Делимся опытом, обсуждаем обновления, возможности и архитектуру модов
Пригласительная ссылка
Навигация
© 2026 Максим Постников. Все права защищены.
Максим—Постников©