Шапка и меню из 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.

Если при установке что-то пошло не так

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению
Понравились модификации?
Можете отправить любую сумму, чтобы поблагодарить автора за работу. Вам плюсик в карму, а мне приятно!
 
Поделитесь впечатлениями
Нравятся модификации?
Расскажите про опыт ваш работы с модификациями — обратная связь поможет сделать их лучше
Расскажите про ваш опыт работы с ними — обратная связь поможет сделать их лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис