Модификация находится в бета-версии. Если нашли ошибку, сообщите о ней здесь
Шапка и меню из Zero‑блоков
Позволяет создавать полностью кастомные хэдеры на основе Zero-блоков — с фиксацией, многоуровневым меню, меню-бургером и множеством других настроек
Дополнение
Дополнение
Выпадающий список с пунктами меню
Инструкция по установке
- 1Создайте и подключите Zero-хэдер с фиксациейДля того, чтобы выпадающее меню работало, необходимо подключить базовый функционал шапки. Инструкцию по его установке можно найти здесь. Если у вас уже установлена шапка, этот шаг можно пропустить.
- 1
- 2Создайте блоки с выпадающими меню и присвойте им класс .uc-submenuФон блоков должен быть прозрачным. Если вы хотите, чтобы при раскрытии подменю появлялось затемнение, добавьте фильтр в настройках фона Zero-блока и задайте его высоту в 100% экрана.
- 3Задайте элементам, по которым будут раскрываться подменю, класс .submenuПервому созданному элементу с этим классом будет соответствовать первый Zero-блок. Если ссылки перемешались, попробуйте их скопировать, удалить и вставить заново поочерёдно – в том порядке, в котором стоят соответствующие им Zero-блоки.
Чтобы в выпадающих меню выделялась активная страница, присвойте ссылкам класс .page. Если у ссылок есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem. - 4Задайте в параметрах модификации скорость раскрытия подменю
- 5Скопируйте код и вставьте его в блок T123 после выпадающих меню и кода с хэдером
Как это сделано?
<script>header.init(".uc-header", { hideDistance: 360, hideDistanceMobile: 240, style: { active:{ color: "#FFFFFF", backgroundColor: "#7366FF", borderColor: "#7366FF", 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: "#CECDD6" }, hover:{ color: "#988FFF" } } })</script>
Видео скоро появится…
Настройки модификации
Настройки модификации
Скорость и тип переходов:
Активный пункт выпадающего меню
Цвет фона
Цвет бордера
Цвет текста
Цвет текста
Цвет бордера
Цвет фона
Пункт выпадающего меню
(при наведении)
(при наведении)
Кнопка выпадающего меню
Кнопка вып. меню
Цвет фона
Цвет бордера
Цвет текста
Стиль текста
Кнопка, при наведении на которую будет раскрываться выпадающее меню.
<script>submenu.init(".uc-submenu")</script>Особенности
- Работает с автоскейломМод работает с масштабированием так же корректно, как и без него
- Поддерживает анимацииБазовые и SBS-анимации запускаются при взаимодействии с блоком
- Создан специально для ТильдыМодификация учитывает особенности Тильды и легко встраивается в неё
Документация
Элементы
Параметры
Стили
Если текущая страница совпадает с указанным адресом, активному пункту меню присваивается класс .current. При наведении на пункт меню, ему присваивается класс .hover. При наведении на ссылку, по которой должно открываться выпадающее меню, ей так же присваивается класс .hover.
Эти классы можно использовать для кастомизации стилей через CSS.
Эти классы можно использовать для кастомизации стилей через CSS.
© 2024 Максим Постников. Все права защищены.
Обо мне
Проекты
Блог
Связаться
Модификации
Максим Постников
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис