Что такое гамбургер в тильде

Есть еще нюанс. В мобильном режиме логотип пропадает и остается только Бургер. А как же название нашей компании? Не беда. Заходим в соседнюю вкладку «Контент», и там есть пункт «Дополнительно», а в нем «Название мобильного меню». Вот туда и пишем название компании, название бренда или просто номер телефона. Теперь в мобильном режиме у нас есть наше название и иконка Бургера.

И опубликовать страницу. В десктопной версии можно видеть полное меню, а в мобильное — Бургер

Боковое меню-гамбургер в zero-блоке на Тильде

Подробная инструкция по использованию несложной модификации для создания бокового меню-гамбургера в zero-блоке с раскрытием на весь экран.

Данная модификация основана на одном из способов создания горизонтального фиксированного меню с раскрытием на весь экран из предыдущей статьи. Но для удобства я решила вынести ее в отдельную статью с подробной инструкцией.

Примеры использования данного меню вы можете видеть на этом сайте и в проекте:
stanki-gefest.tilda.ws.

Примечание: модификация не будет работать, если у zero-блока с меню включена опция автоскейла.
Шаг 1. Создаем zero-блок

Создайте один zero-блок высотой 100%, состоящий из двух частей: видимой части с иконкой-бургером (ее ширина у меня равна 10%) и раскрытым на весь экран меню:

В видимой части меню создайте главную кнопку, по нажатию на которую будет открываться меню и триггериться анимация появления пунктов меню. Присвойте этой кнопке уникальный класс, например, «zero_menu_btn» (правая кнопка → Add CSS Class Name).

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

Шаг 2. Вставляем код в блок T123
Далее добавьте на страницу с меню в блок T123 следующий код:

Вместо #rec262169051 укажите свой идентификатор zero-блока с меню
Вместо 0.6s укажите время, за которое должно раскрыться меню
Вместо 10% укажите ширину закрытого меню (можно задать в рх)

Шаг 3. Вставляем код в HEADER (опционально)

Чтобы отодвинуть весь контент сайта вправо на ширину меню, добавьте этот код в HEADER (Настройки сайта → Еще → ПОЛЬЗОВАТЕЛЬСКИЕ CSS-СТИЛИ).

 @media (min-width: 1201px) < div[id="allrecords"] < padding-left: 10% !important; /*Ширина закрытого меню*/ >>

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

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

Заключение

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

Понравилась статья?

Как создать меню «гамбургер» из ZeroBlock в полноэкранном режиме в Tilda

Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.

Связаться с нами
Задать вопрос
Купить шаблон

Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)

Заказать установку примера

Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.

Как создать боковое меню «гамбургер» из ZeroBlock в Tilda

Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.

Связаться с нами
Задать вопрос
Купить шаблон

Заказать установку примера

Что такое гамбургер в тильде