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

Шапка и меню из 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.
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению
Если при установке что-то пошло не так
Чат для дизайнеров
Вместе всё получится
3 000+ человек
Присоединяйтесь к авторскому Telegram-каналу!
Всё о возможностях библиотеки, новых модификациях и тех. поддержке
t.me/postnikovmds
Понравились модификации?
Можете отправить любую сумму, чтобы поблагодарить автора за работу. Вам плюсик в карму, а мне приятно!
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
 
LinkedIn
Behance
Максим Постников
© 2025 Максим Постников. Все права защищены.
Ru
En
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Поделитесь впечатлениями
Нравятся модификации?
Расскажите про опыт ваш работы с модификациями — обратная связь поможет сделать их ещё лучше!
Расскажите про ваш опыт работы с ними — обратная связь поможет сделать их лучше!
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис
Максим Постников | Дизайн...
Отключение автоскейла для для отдельных браузеров/устройств
27
20 фев в 12:00
120