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