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

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

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

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

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

Дополнение

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

Дополнение

Выпадающее меню из Zero-блоков

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

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

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

Создайте блоки с выпадающими меню и присвойте им класс .uc-submenu

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

Первому созданному элементу с этим классом будет соответствовать первый Zero-блок. Если ссылки перемешались, попробуйте их скопировать, удалить и вставить заново поочерёдно – в том порядке, в котором стоят соответствующие им Zero-блоки.

Чтобы в выпадающих меню выделялась активная страница, присвойте ссылкам класс .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>

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

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

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

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

Активный пункт выпадающего меню

Цвет фона

Цвет бордера

Цвет текста

Цвет бордера

Цвет фона

Пункт выпадающего меню

(при наведении)

Кнопка выпадающего меню

Кнопка вып. меню

Цвет фона

Цвет бордера

Цвет текста

Стиль текста

Кнопка, при наведении на которую будет раскрываться выпадающее меню.

<!--header.js Выпадающее меню из Zero-блоков. https://postnikovmd.com/mods/header/submenu-->
<script>submenu.init(".uc-submenu")</script>

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

Особенности

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

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

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

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

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

Элементы

Параметры

Стили

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