Loading...
Нолиму 5 лет — выиграй подписку на 5 лет 
Участвовать
Скопируйте промокод → вставьте при оплате → по окончании триала — 750 ₽/мес

3 дня полного доступа к Нолим за 100 ₽

Осталось:
00
20 000+ дизайнеров на Tilda работают с Нолим
Слайдеры · Меню · Анимации · Формы · 200+ модификаций
Скачать расширение
Поддержка
Поддержка
Модификации
Промпты
ИИ-инструменты
База знаний
Профиль
Подписка
Партнерка
Блог
Шаблоны
....
NLM082 • Время настройки: 2 минуты

Бургер-меню из Zero Block на Тильде — справа, слева, сверху

С помощью нашего скрипта ты можешь собрать боковое меню
в Зеро блоке Tilda.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут

Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды

Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды

Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?

Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик

База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Установи ее в один клик прямо внутри Тильды — без копирования кода. Плюс еще 200 модификаций, инструменты для Zero Block и генератор CSS-стилей в привычном интерфейсе
Эта модификация есть в нашем расширении
4,7•20 000+ пользователей
Расширение Нолим
Установить
Chrome Web Store•1,32 MB• бесплатно

Посмотрите, как будет выглядеть модификация на вашем сайте.

Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Выезжающее меню справа
Выезжающее меню сверху
Выезжающее меню слева
Как можно настроить модификацию для разных сценариев. Посмотреть тут
Закрыть
Магазин
Команда
Вопросы
Вакансии
Контакты
Подписка
Помощь
Рассылка
Архив
Пресса
Программа
Новости
Информация
FAQ
Закрыть
Магазин
Команда
Вопросы
Вакансии
Контакты
Подписка
Помощь
Архив
Пресса
Программа
Новости
Информация
FAQ
Закрыть
Магазин
Команда
Вопросы
Вакансии
Контакты
Подписка
Помощь
Рассылка
Архив
Пресса
Программа
Новости
Информация
FAQ

Смотрите, как быстро установить модификацию

Инструкция

1. Внутри Зеро-блока собираешь своё меню для бургера;

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

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

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

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

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

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

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

Имей в виду:

  • Настройка фона у Зеро-блока — прозрачная;
  • Не ставь ограничение видимости для блока с бургер-меню, оно вызывается по кнопке, поэтому в ограничениях нет необходимости. В настройках блока диапазон видимости на устройствах должен быть от 0px до Max;
  • Выравнивание элементов должно быть по той стороне, откуда будет появляться меню;
  • Все элементы должны быть в Window Container;
  • Если шейпы или картинки не отображаются в блоке с бургер-меню, нужно выключить lazyload;
  • Чтобы меню закрывалось при переходе по якорной ссылке добавь ко всем элементам меню класс закрытия.

Сгенерируйте код для своего сайта

Копировать код
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Бургер-меню из Zero Block на Тильде — боковое меню под свой дизайн

Стандартное бургер-меню в Тильде подходит для базовой навигации, но часто ограничивает дизайн. Если нужно своё расположение пунктов, крупные ссылки, изображения, соцсети, кнопки, фон или нестандартная анимация, меню удобнее собрать в Zero Block.

Модификация NLM082 помогает превратить такой Zero Block в выезжающее меню. Оно может появляться справа, слева или сверху, открываться по ссылке и закрываться по клику на выбранные элементы.

Как подготовить меню

Сначала собери меню внутри Zero Block: добавь ссылки, кнопку закрытия, логотип, иконки, контакты или другие элементы, которые нужны в навигации. Фон у самого Zero Block лучше оставить прозрачным, чтобы меню корректно появлялось поверх страницы.

Блок с меню не нужно скрывать через ограничения видимости. Он вызывается по кнопке, поэтому в настройках блока диапазон видимости должен быть от 0 px до Max. Все элементы меню лучше держать в Window Container, чтобы они правильно вели себя при выезде.

Как настроить открытие и закрытие

В генераторе укажи ID Zero Block, который должен открываться как меню. Для кнопки открытия задай ссылку, например `#open`. Такая ссылка может стоять внутри Zero Block или в стандартном блоке Тильды.

Для закрытия меню добавь CSS-класс к нужным элементам: кнопке закрытия, пунктам меню, иконкам или ссылкам. Такой же класс укажи в генераторе. Если меню ведёт к якорям на этой же странице, класс закрытия лучше добавить ко всем пунктам, чтобы после перехода меню не оставалось открытым.

Что можно настроить в генераторе

В генераторе выбирается сторона анимации: справа, слева или сверху. Также задаётся ширина меню в пикселях или процентах, z-index, поведение скролла и overflow.

Если меню выше экрана, можно включить overflow auto, чтобы внутри появился скролл. Если скроллбар мешает дизайну, его можно скрыть, но прокрутка останется доступной. При необходимости ширину меню можно увеличить на ширину скроллбара, чтобы он не ломал вёрстку.

Что учесть при верстке

Элементы внутри меню нужно выравнивать по той стороне, откуда оно появляется. Для меню справа логичнее держать композицию у правого края, для меню слева — у левого. Так блок выглядит аккуратнее во время выезда и не требует лишней подгонки после установки.

Если шейпы или картинки не отображаются в открытом меню, проверь lazyload. На таких элементах его лучше отключить, потому что меню появляется по клику, а отложенная загрузка иногда мешает показать графику сразу.

Что проверить после публикации

После настройки скопируй HTML-код из генератора, вставь его в блок T123 и опубликуй страницу. Проверь открытие меню, закрытие по кнопке, переходы по пунктам, работу якорных ссылок и поведение на мобильной версии.

Отдельно посмотри, не перекрывает ли меню важные элементы сайта и хватает ли ему z-index. Если страница должна прокручиваться даже при открытом меню, включи настройку, которая не блокирует скролл. Если меню должно полностью удерживать внимание пользователя, скролл страницы лучше оставить заблокированным.

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

В генераторе на nolim.cc/side-menu выбери сторону появления меню (справа, слева, сверху), анимацию открытия и параметры оверлея. Скопируй код и вставь в блок «HTML-код». После публикации кнопка-гамбургер открывает твоё меню.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Есть идеи по улучшению этой модификации или созданию новой?
Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.
Не забудь подписаться, чтобы быть в курсе последних обновлений.