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

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

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

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

Выпадающий список с пунктами меню

Дополнение

Меню-бургер для сайта

Дополнение

Меню-бургер из Zero-блока

Инструкция по установке

Создайте и подключите Zero-хэдер с фиксацией

Для того, чтобы выпадающее меню работало, необходимо подключить базовый функционал шапки. Инструкцию по его установке можно найти здесь. Если у вас уже установлена шапка, этот шаг можно пропустить.

Создайте Zero-блок с меню и присвойте ему класс .uc-menu

Фон блока должен быть прозрачным. Если вы хотите, чтобы при раскрытии меню появлялось затемнение, добавьте фильтр в настройках фона Zero-блока и поставьте его высоту в 100% экрана.

Чтобы в выпадающих меню выделялась активная страница, присвойте ссылкам класс .page. Если у ссылок есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem.
Добавьте в хэдер свои кнопки открытия/закрытия меню. Для кнопки открытия поставьте ссылку #menu, а для закрытия – #menu-close

Если вы хотите, чтобы меню раскрывалось на весь экран, переместите кнопку закрытия в блок с меню и поставьте галочку в настройках модификации напротив параметра «Раскрывать на весь экран».
Задайте в настройках модификации параметры анимации меню
Скопируйте код и вставьте его в блок 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>

Открыть пример

Настройки модификации

Анимация раскрытия

Размытие фона

На весь экран

Если включено, открытое меню будет перекрывать шапку, если нет – отображаться под ней

Скорость и тип переходов

+ Настройки стилей

Активный пункт меню

Цвет фона

Цвет бордера

Цвет текста

Цвет бордера

Цвет фона

Пункт меню при наведении

Стиль текста

<!--header.js Меню-бургер из Zero-блока. https://postnikovmd.com/mods/header/menu-->
<script>menu.init(".uc-menu")</script>

Скопировать код

Особенности

Работает с автоскейлом

Мод работает с масштабированием так же корректно, как и без него
Поддерживает анимации

Базовые и SBS-анимации запускаются при взаимодействии с блоком
Создан специально для Тильды

Модификация учитывает особенности Тильды и легко встраивается в неё

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

Элементы

Параметры

Стили

Если текущая страница совпадает с указанным адресом, активному пункту меню присваивается класс .current. При наведении на пункт меню, ему присваивается класс .hover.
Эти классы можно использовать для кастомизации стилей через CSS.