Боковое бургер-меню
Выдвигает боковое меню из Zero Block; закрывается кнопкой, кликом по затемнению или пункту.
Что делает модификация
Выдвигает боковое меню из Zero Block; закрывается кнопкой, кликом по затемнению или пункту.
Требования
Проверьте классы и ID на опубликованной странице. Не назначайте этим же элементам конфликтующую анимацию. Если меняете имя класса в кабинете, укажите такое же имя в Tilda.
Настройте под свой сайт
| Настройка | Назначение |
|---|---|
| Ширина меню, px | Параметр 180–600 |
| Фон меню | Выберите значение в интерфейсе личного кабинета. |
| Цвет пунктов | Выберите значение в интерфейсе личного кабинета. |
| Цвет наведения | Выберите значение в интерфейсе личного кабинета. |
| Раскрытие, ms | Параметр 0–2000 |
Пошаговая установка
- Подготовьте менюСоздайте пустой Zero Block с классом uc-menu: высота 1 px, фон удалён, Overflow → Visible.
- Создайте подложкуДобавьте HTML-элемент в Window Container, оси Left/Top. Вставьте первую часть кода с burger-menu. Ширина HTML-элемента должна совпадать с шириной в кабинете.
- Добавьте пунктыСоздайте текстовые элементы с классом menu-li, в Window Container Left/Top. Разместите их внутри подложки. Для ссылок на разделы используйте #about, #contacts и блоки T173 с такими именами.
- Добавьте управлениеИконке открытия задайте menu-show, закрытия — menu-hide. Для URL иконок можно использовать LF Drive. Кнопка открытия должна оставаться видимой за пределами меню.
- ОпубликуйтеВторую часть с CSS и обработчиками вставьте в T123. Проверьте размещение пунктов и кнопок на всех адаптивах. Для якорей можно добавить штатный T178.
Проверьте классы и ID на опубликованной странице. Не назначайте этим же элементам конфликтующую анимацию. Если меняете имя класса в кабинете, укажите такое же имя в Tilda.
Частые вопросы
Где настроить модификацию?
После покупки откройте её в личном кабинете, задайте параметры и нажмите «Сгенерировать код».
Нужно ли править код вручную?
Параметры задаются в кабинете. Составные фрагменты вставьте в места, указанные в инструкции.
Пример использует мои блоки?
Пример показывает механику на демонстрационных элементах. На вашем сайте используются подготовленные элементы Tilda.