Шапка и меню из Zero‑блоков
Позволяет создавать полностью кастомные хэдеры на основе Zero-блоков — с фиксацией, многоуровневым меню, меню-бургером и множеством других настроек
Выпадающее меню из Zero-блоков
Инструкция по установке
- Создайте и подключите Zero-хэдер с фиксациейДля того, чтобы выпадающее меню работало, необходимо подключить базовый функционал шапки. Инструкцию по его установке можно найти здесь. Если у вас уже установлена шапка, этот шаг можно пропустить.
-
- Создайте блоки с выпадающими меню и присвойте им класс .uc-submenuФон этих блоков должен быть прозрачным. Если при раскрытии подменю у блока должно появляться затемнение, задайте фильтр в настройках фона и установите его высоту в 100% экрана.
- Задайте элементам, по которым будут раскрываться подменю, класс .submenuЕсли таких элементов несколько, то первому (нижнему в слоях) элементу с такой классом будет соответствовать первый 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-анимации запускаются при взаимодействии с блоком
- Создан специально для ТильдыМодификация учитывает особенности Тильды и легко встраивается в неё
Документация
Элементы
Параметры
Распространенные проблемы
Проблема связана с тем, что при загрузке страницы Тильда сначала отрисовывает блок, и только затем модификация его скрывает, что вызывает мерцание на доли секунд.
Для решения проблемы хэдер и его компоненты лучше поместить в конец страницы или добавить в неё блок T228 (плавная загрузка страницы).
Для решения проблемы хэдер и его компоненты лучше поместить в конец страницы или добавить в неё блок T228 (плавная загрузка страницы).
Такое может происходить, если у хэдера установлена нулевая или близкая к нулевой высота. Убедитесь, что она равняется физической высоте хэдера в пикселях, а сам блок не зафиксирован в настройках – модификация фиксирует его самостоятельно.
Такое может происходить, если у хэдера установлена нулевая или близкая к нулевой высота. Так как модификация завязана на расчете высоты основного хэдера, её наличие является ключевым фактором для работы остальных компонентов.
Убедитесь, что высота Zero-блока с хэдером равняется его физической высоте в пикселях. Также проверьте, что триггерные элементы .submenu не перекрываются другими шейпами или блоками.
Убедитесь, что высота Zero-блока с хэдером равняется его физической высоте в пикселях. Также проверьте, что триггерные элементы .submenu не перекрываются другими шейпами или блоками.
Данная проблема возникает из-за того, что между триггерным элементом .submenu и нижней границей хэдера образуется пустое пространство. При попадании курсора в эту область, триггерный элемент перестаёт быть активным, и выпадающее меню скрывается.
Для устранения проблемы рекомендуется растянуть триггерный элемент по всей высоте хэдера или прижать его к нижней границе блока.
Для устранения проблемы рекомендуется растянуть триггерный элемент по всей высоте хэдера или прижать его к нижней границе блока.
Добавьте параметр? showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=header, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.
Подробная документация к модификации
Примеры использования, инструкции по установке и разбор наиболее распространенных ошибок
Присоединяйтесь к Telegram-каналу
Всё о возможностях библиотеки, новых модификациях и личном опыте
Перейти
t.me/postnikovmds
Чат для дизайнеров
«Вместе всё получится»
«Вместе всё получится»
Поддержка по модификациям, обмен опытом, круассаны и многое другое
3,2K участников
Навигация
© 2026 Максим Постников. Все права защищены.
Максим—Постников©