Tilda PublishingПодписка

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

Введение

Ключевая фраза боковое бургер меню в Tilda вступила в игру, и мы готовы начать. Боковое бургер меню — это как магия, которая прячется в уголке вашего сайта и ждет своего момента, чтобы раскрыться и показать пользователю всю его функциональность. Представьте, что у вас есть скрытый ящик с неограниченным количеством сюрпризов, и вы можете открывать его с легкостью. Это и есть боковое бургер меню, которое мы реализуем, используя zero block тильды.

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

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

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

Давайте кратко перечислим некоторые из главных особенностей и преимуществ бокового бургер меню в Tilda:

  • Простота использования: Настройка бокового бургер меню — это как детская игра. Вы можете справиться с этой задачей даже, если раньше не имели опыта в веб-разработке.
  • Эффективность: Скрытое боковое меню позволяет сохранить чистоту и минимализм вашего сайта, убирая всю лишнюю информацию за кулисы.
  • Адаптивность: Ваше боковое бургер меню будет выглядеть отлично на всех устройствах, от компьютеров до смартфонов.
  • Оригинальность: Вы сможете создать уникальное боковое меню, который подчеркнет стиль вашего сайта.

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

Боковое бургер меню в Tilda

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

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

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

Боковое бургер меню в 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

Вы узнали, как создавать свои собственные пункты меню в тильде и привязали к ним якорные ссылки. Настало время для создания кнопок управления боковым бургер меню в 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. Нажмите на кнопку «Контент» и скопируйте в него следующий код:

Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:

– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud

Оформить подписку
  1. Измените цвет фона меню, цвет пунктов меню и цвет этих пунктов в соответствующих местах в коде, которые указаны с помощью комментариев
  2. Сохраните изменения и опубликуйте страницу

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

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

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

Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:

– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud

Оформить подписку

Заключение

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

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tilda

Добавить комментарий