Время настройки: 5 минут

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

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

Zero-хэдер с фиксацией

Инструкция по установке
  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.4/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-анимации запускаются при взаимодействии с блоком
  • Создан специально для Тильды
    Модификация учитывает особенности Тильды и легко встраивается в неё

Документация

Элементы
Параметры
Стили
Если текущая страница совпадает с указанным адресом, активному пункту меню присваивается класс .current. При наведении на пункт меню, ему присваивается класс .hover.
Эти классы можно использовать для кастомизации стилей через CSS.
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению
Если при установке что-то пошло не так
Чат для дизайнеров
Вместе всё получится
3 000+ человек
Присоединяйтесь к авторскому Telegram-каналу!
Всё о возможностях библиотеки, новых модификациях и тех. поддержке
t.me/postnikovmds
Понравились модификации?
Можете отправить любую сумму, чтобы поблагодарить автора за работу. Вам плюсик в карму, а мне приятно!
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
 
LinkedIn
Behance
Максим Постников
© 2025 Максим Постников. Все права защищены.
Ru
En
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Поделитесь впечатлениями
Нравятся модификации?
Расскажите про опыт ваш работы с модификациями — обратная связь поможет сделать их ещё лучше!
Расскажите про ваш опыт работы с ними — обратная связь поможет сделать их лучше!
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис
Максим Постников | Дизайн...
Отключение автоскейла для для отдельных браузеров/устройств
27
20 фев в 12:00
120