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

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

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

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

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

Дополнение

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

Дополнение

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

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

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

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

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

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

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