LinkedIn
Behance
Максим Постников
© 2025 Максим Постников. Все права защищены.
Ru
En

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