Top.Mail.Ru
Loading...
No-code платформа для интеграции с российскими сервисами
Адаптер
Мы в соцсетях
Ответим на вопросы
Техподдержка
Образовательные курсы и гайды для IT-специалистов
Академия
Клиентам
О нас
Плагин для Тильды
Партнерам
Академия
Расширение
Техподдержка
Модификации
Профиль
Подписка
Партнерка
Новости +13
Шаблоны
Идеи
Услуги
NLM082 ВРЕМЯ НАСТРОЙКИ: 2 МИНУТЫ

КАК СДЕЛАТЬ БУРГЕРНОЕ МЕНЮ ИЗ ЗЕРО БЛОКА НА ТИЛЬДЕ?

С помощью нашего скрипта ты можешь собрать боковое меню
в Зеро блоке Tilda.
Как можно использовать модификацию NLM082, собрали примеры тут
1. Внутри Зеро-блока собираешь своё меню для бургера;

2. Настраиваешь следующие поля в генераторе:
  • «id блока для показа» — Вставляешь id меню из Зеро-блока;
  • «Ссылка для открытия блока» — Вписываешь ссылку #open для открытия бургерного меню;
Ссылка может находиться внутри Зеро-блока или стандартного блока

  • «Класс для закрытия блока» — В Зеро-блоке, добавь классы к элементам, при нажатии на которые будет происходить закрытие меню;
Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс, что и в генераторе

  • «Сторона анимации» — Выбираешь сторону, из которой будет выезжать меню;
  • «Ширина блока» — Указываешь здесь значение в пикселях, либо в процентах;

Эта настройка отвечает за размер меню, которое выезжает. Зависит от поля «Единицы измерения ширины»

  • «Overflow» — Из-за технических особенностей, настройку для overflow нужно выбирать здесь, вместо настроек в зеро блоке;
Auto — скроллбар будет появляться, если высота меню выше высоты экрана.
Hidden — скроллбар появляться не будет

  • «Z-index меню» — указываешь значение повыше (данный параметр отвечает будет ли видно меню над другими элементами);

  • «Не отображать скроллбар» — Устанавливает для скроллбара ширину 0 и скрывает его, а возможность «сроллить» остается;
  • «Увеличивать ширину меню на ширину скроллбара« — Если включено, добавляет к значению в поле «Ширина блока» ширину скроллбара. Используй в случаях, когда не хочешь «ломать» верстку скроллбаром. Попробуй включить/выключить данную настройку, чтобы понять, что вам подходит. На Mac OS ширина скроллбара равна 0.
  • «Проигрывать анимацию при каждом открытии» — Попробуй включить/выключить данную настройку, чтобы понять, что вам подходит.
  • «Не блокировать скролл» — Попробуй включить/выключить данную настройку, чтобы понять, что вам подходит.
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123.

Имей в виду:

  • Настройка фона у Зеро-блока — прозрачная;
  • Не ставь ограничение видимости для блока с бургер-меню, оно вызывается по кнопке, поэтому в ограничениях нет необходимости;
  • Выравнивание элементов должно быть по той стороне, откуда будет появляться меню;
  • Все элементы должны быть в Window Container;
  • Если шейпы или картинки не отображаются в блоке с бургер-меню, нужно выключить lazyload;
  • Чтобы меню закрывалось при переходе по якорной ссылке добавь ко всем элементам меню класс закрытия.
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 («HTML-код») на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Шаг 3
Остались вопросы?
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Шаг 2
Настройте модификацию
Скопируйте код из генератора, вставьте его в блок T123 («HTML-код») на вашем сайте в Тильде и опубликуйте страницу.
Шаг 1
Возобновите подписку
И получите доступ к библиотеке из более чем 200 модификаций.
Копировать код
Шаг 3
Остались вопросы?
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Шаг 2
Настройте модификацию
Скопируйте код из генератора, вставьте его в блок T123 («HTML-код») на вашем сайте в Тильде и опубликуйте страницу.
Шаг 1
Оплатите подписку
И получите доступ к библиотеке из более чем 200 модификаций.
Есть идеи по улучшению этой модификации или созданию новой?
Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.
Не забудь подписаться, чтобы быть в курсе последних обновлений.