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

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

Позволяет создавать полностью кастомные хэдеры на основе 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.