Боковое бургер меню в Tilda zero block. Скрытая магия

Введение

Ключевая фраза «боковое бургер-меню» в Tilda вступила в действие, и мы готовы к старту. Это меню — как скрытая магия, спрятанная в уголке сайта, ожидающая момента, чтобы раскрыться и продемонстрировать все свои возможности пользователю. Представьте, что у вас есть тайник с множеством сюрпризов, который можно открыть с легкостью. Именно таким образом работает боковое бургер-меню, которое мы создаем с использованием Zero Block в Tilda.

Добавляйте в бургер все, что захотите

Одной из ключевых особенностей бокового бургер-меню в Tilda Zero Block является его скрытость. Оно не занимает место на странице, пока пользователь не активирует его. Только после клика меню раскрывается, открывая все возможности, которые оно может предоставить вашему сайту. Например, можно добавить ссылки на социальные сети, контактную информацию и другие важные элементы — все это легко разместить в боковом бургер-меню.

Боковое бургер меню в Tilda: Особенности и преимущества

Вот основные особенности и преимущества бокового бургер-меню в Tilda:

- Простота использования:

Настройка меню настолько проста, что с ней справится даже новичок в веб-разработке.

- Эффективность:

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

- Адаптивность:

Меню будет выглядеть отлично на любых устройствах — от ПК до смартфонов.

- Оригинальность:

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

Как добавить боковое бургер меню в Tilda Zero Block

Теперь, когда вы узнали о всех преимуществах и возможностях бокового бургер меню в Tilda, давайте поговорим о том, как его добавить. Это действительно просто:

1. Создайте блоки (разделы), на которые будут ссылаться пункты бокового меню
2. Перед каждым блоком добавьте блок с якорной ссылкой «Т173»
3. Для каждой якорной ссылки, в параметре «Контент» введите её имя. Например, если это блок с контактной информацией, то имя якорной ссылки будет выглядеть так: «contacts»
4. После всех блоков на странице создайте блок «Т178» для плавного скрола к якорным ссылкам
5. Создайте zero block в любом месте на странице. Если у вас многостраничный сайт, то выполняйте все шаги, начиная с пятого в header или в footer вашего сайта. Чтобы меню работало на всех страницах.
6. Зайдите в настройки zero block.
7. Нажмите на ссылку «Добавить CSS Class Name»
8. В появившемся поле пропишите «uc-menu»
9. Зайдите в редактор блока и удалите из него все элементы
10. Найдите пункт «POSITION AND OVERFLOW»
11. Измените параметр «OVERFLOW» на «Visible»
12. Удалите цвет фона
13. Установите для блока высоту в 1px
14. Нажмите на кнопку «+» и выберите «Add HTML»
15. В настройках html элемента нажмите на «+CONTAINER»
16. Для параметра контейнер выберите «Window Container»
17. Для параметров «AXIS X» и «AXIS Y» выберите «left» и «top» соответственно
18. В поле ширины элемента пропишите 320px
19. Откройте этот html элемент
20. Присвойте блоку внутри него класс «burger-menu» и удалите текст «Hello world!»

Пункты бургер меню в Tilda

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

1. Нажмите на кнопку «+» и выберите «Add Text»
2. В текстовом элементе пропишите название первого пункта меню, например «О нас»
3. Нажмите на текстовый элемент правой кнопкой мыши и выберите «Add CSS Class Name»
4. В появившемся поле введите «menu-li»
5. В настройках текстового элемента нажмите на «+CONTAINER»
6. Для параметра контейнер выберите «Window Container»
7. Для параметров «AXIS X» и «AXIS Y» выберите «left» и «top» соответственно
8. Разместите элемент в пределах html элемента
9. В пункте «LINK» в параметре «URL» введите имя якорной ссылки, на которую будет ссылаться пункт меню. Например, если якорная ссылка называется «about», то ссылкой на неё будет «#about»
10. Продублируйте этот пункт меню для создания других.
11. Для каждого нового пункта измените текст внутри элемента, а в «URL» пропишите соответствующие имена якорных ссылок.
12. Удалите цветовые значения всех пунктов меню.

Кнопки управления боковым бургер меню в Tilda

Вы узнали, как создавать свои собственные пункты меню в тильде и привязали к ним якорные ссылки. Настало время для создания кнопок управления боковым бургер меню в Tilda, которые будут открывать и закрывать наше меню:

1. В качестве открывающей кнопки вы можете использовать как стандартную кнопку, так и загрузить свои иконки через «Add Image». Мы воспользуемся вторым способом.
2. После того, как загрузите иконку, присвойте ей соответствующее вашему сайту значение ширины.
3. В настройках иконки нажмите на «+CONTAINER»
4. Для параметра контейнер выберите «Window Container»
5. Для параметров «AXIS X» и «AXIS Y» выберите «left» и «top» соответственно
6. Нажмите на иконку правой кнопкой мыши и выберите «Add CSS Class Name»
7. В появившемся поле введите «menu-show»
8. Расположите иконку справа от html элемента
9. Продублируйте эту иконку, загрузив в неё другую иконку
10. Нажмите на новую иконку правой кнопкой мыши и выберите «Add CSS Class Name»
11. В появившемся поле введите «menu-hide»
12. Расположите иконку в пределах html элемента, она будет закрывать боковое бургер меню в Tilda

Настройка адаптивности и финал

Следующим шагом будет настройка адаптивности нашего бургер меню. Если вы выполнили все предыдущие шаги, то останется сделать только следующее:

1. Нажмите на иконку в виде смартфона в zero block. (Размер 320-480)
2. В этом окне нажмите на html элемент и измените его ширину с 320 px на 240px
3. Перетащите открывающую кнопку ближе к html элементу так, чтобы она оказалась в пределах области видимости
4. Скорректируйте расположение закрывающей кнопки
5. Сохраните изменения и закройте зеро блок
6. После всех блоков создайте блок «Т123»
7. Нажмите на кнопку «Контент» и скопируйте в него код
8. Измените цвет фона меню, цвет пунктов меню и цвет этих пунктов в соответствующих местах в коде, которые указаны с помощью комментариев
9. Сохраните изменения и опубликуйте страницу

И вот, наконец, вы полностью реализовали задуманное и создали свое боковое бургер меню в tilda zero block. Меню открывается нажатием на открывающую иконку, а закрывается, если нажать на закрывающую кнопку, на пункты меню или в любом месте за пределами меню.

Боковое бургер меню в тильде с правой стороны

Для того, чтобы меню выезжало не слева, а справа, выполните все указания выше аналогичным образом на правой стороне зеро блока. После этого в блок «Т123» скопируйте код.

Получить код модификации