Модификация находится в бета-версии. Если нашли ошибку, сообщите о ней здесь
Шапка и меню из Zero‑блоков
Позволяет создавать полностью кастомные хэдеры на основе Zero-блоков — с фиксацией, многоуровневым меню, меню-бургером и множеством других настроек
Дополнение
Дополнение
Меню-бургер для сайта
Инструкция по установке
- 1Создайте и подключите Zero-хэдер с фиксациейДля того, чтобы выпадающее меню работало, необходимо подключить базовый функционал шапки. Инструкцию по его установке можно найти здесь. Если у вас уже установлена шапка, этот шаг можно пропустить.
- 1
- 2Создайте Zero-блок с меню и присвойте ему класс .uc-menuФон блока должен быть прозрачным. Если вы хотите, чтобы при раскрытии меню появлялось затемнение, добавьте фильтр в настройках фона Zero-блока и поставьте его высоту в 100% экрана.
Чтобы в выпадающих меню выделялась активная страница, присвойте ссылкам класс .page. Если у ссылок есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem. - 3Добавьте в хэдер свои кнопки открытия/закрытия меню. Для кнопки открытия поставьте ссылку #menu, а для закрытия – #menu-closeЕсли вы хотите, чтобы меню раскрывалось на весь экран, переместите кнопку закрытия в блок с меню и поставьте галочку в настройках модификации напротив параметра «Раскрывать на весь экран».
- 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>menu.init(".uc-menu")</script>Особенности
- Работает с автоскейломМод работает с масштабированием так же корректно, как и без него
- Поддерживает анимацииБазовые и SBS-анимации запускаются при взаимодействии с блоком
- Создан специально для ТильдыМодификация учитывает особенности Тильды и легко встраивается в неё
Документация
Элементы
Параметры
Стили
Если текущая страница совпадает с указанным адресом, активному пункту меню присваивается класс .current. При наведении на пункт меню, ему присваивается класс .hover.
Эти классы можно использовать для кастомизации стилей через CSS.
Эти классы можно использовать для кастомизации стилей через CSS.
© 2024 Максим Постников. Все права защищены.
Обо мне
Проекты
Блог
Связаться
Модификации
Максим Постников
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис