Боковое бургер меню в Tilda zero block. Скрытая магия
Содержимое
Введение
Ключевая фраза боковое бургер меню в Tilda вступила в игру, и мы готовы начать. Боковое бургер меню — это как магия, которая прячется в уголке вашего сайта и ждет своего момента, чтобы раскрыться и показать пользователю всю его функциональность. Представьте, что у вас есть скрытый ящик с неограниченным количеством сюрпризов, и вы можете открывать его с легкостью. Это и есть боковое бургер меню, которое мы реализуем, используя zero block тильды.
Добавляйте в бургер все, что захотите
Одной из главных фишек бокового бургер меню в Tilda Zero Block является его невидимость. Пока пользователь не кликнет на него, оно остается скрытым, не загромождая вашу страницу. И только когда оно раскрывается, вы видите весь богатый функционал, который может предложить вашему сайту. Скажем, вы хотите добавить креативные ссылки на социальные сети, контактную информацию и другие важные элементы — все это можно уместить в боковом бургер меню.
Боковое бургер меню в Tilda: Особенности и преимущества
Давайте кратко перечислим некоторые из главных особенностей и преимуществ бокового бургер меню в Tilda:
- Простота использования: Настройка бокового бургер меню — это как детская игра. Вы можете справиться с этой задачей даже, если раньше не имели опыта в веб-разработке.
- Эффективность: Скрытое боковое меню позволяет сохранить чистоту и минимализм вашего сайта, убирая всю лишнюю информацию за кулисы.
- Адаптивность: Ваше боковое бургер меню будет выглядеть отлично на всех устройствах, от компьютеров до смартфонов.
- Оригинальность: Вы сможете создать уникальное боковое меню, который подчеркнет стиль вашего сайта.
Как добавить боковое бургер меню в Tilda Zero Block

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

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

Выполнив предыдущие шаги, мы создали фоновую плашку для нашего будущего бокового бургер меню в Tilda. Теперь займемся созданием пунктов меню. Для этого:
- Нажмите на кнопку «+» и выберите «Add Text»
- В текстовом элементе пропишите название первого пункта меню, например «О нас»
- Нажмите на текстовый элемент правой кнопкой мыши и выберите «Add CSS Class Name»
- В появившемся поле введите «menu-li»
- В настройках текстового элемента нажмите на «+CONTAINER»
- Для параметра контейнер выберите «Window Container»
- Для параметров «AXIS X» и «AXIS Y» выберите «left» и «top» соответственно
- Разместите элемент в пределах html элемента
- В пункте «LINK» в параметре «URL» введите имя якорной ссылки, на которую будет ссылаться пункт меню. Например, если якорная ссылка называется «about», то ссылкой на неё будет «#about»
- Продублируйте этот пункт меню для создания других.
- Для каждого нового пункта измените текст внутри элемента, а в «URL» пропишите соответствующие имена якорных ссылок.
- Удалите цветовые значения всех пунктов меню.
Кнопки управления боковым бургер меню в Tilda

Вы узнали, как создавать свои собственные пункты меню в тильде и привязали к ним якорные ссылки. Настало время для создания кнопок управления боковым бургер меню в Tilda, которые будут открывать и закрывать наше меню:
- В качестве открывающей кнопки вы можете использовать как стандартную кнопку, так и загрузить свои иконки через «Add Image». Мы воспользуемся вторым способом.
- После того, как загрузите иконку, присвойте ей соответствующее вашему сайту значение ширины.
- В настройках иконки нажмите на «+CONTAINER»
- Для параметра контейнер выберите «Window Container»
- Для параметров «AXIS X» и «AXIS Y» выберите «left» и «top» соответственно
- Нажмите на иконку правой кнопкой мыши и выберите «Add CSS Class Name»
- В появившемся поле введите «menu-show»
- Расположите иконку справа от html элемента
- Продублируйте эту иконку, загрузив в неё другую иконку
- Нажмите на новую иконку правой кнопкой мыши и выберите «Add CSS Class Name»
- В появившемся поле введите «menu-hide»
- Расположите иконку в пределах html элемента, она будет закрывать боковое бургер меню в Tilda
Настройка адаптивности и финал
Следующим шагом будет настройка адаптивности нашего бургер меню. Если вы выполнили все предыдущие шаги, то останется сделать только следующее:
- Нажмите на иконку в виде смартфона в zero block. (Размер 320-480)
- В этом окне нажмите на html элемент и измените его ширину с 320 px на 240px
- Перетащите открывающую кнопку ближе к html элементу так, чтобы она оказалась в пределах области видимости
- Скорректируйте расположение закрывающей кнопки
- Сохраните изменения и закройте зеро блок
- После всех блоков создайте блок «Т123»
- Нажмите на кнопку «Контент» и скопируйте в него следующий код:
<style>
.loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #318CE7; /* Цвет фона */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader,
.loader:before,
.loader:after {
background: white; /* Цвет прелоадера */
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: white; /* Цвет прелоадера */
text-indent: -9999em;
margin: 0 auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%, 80%, 100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%, 80%, 100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
</style>
<div class="loader-wrapper">
<div class="loader">Loading...</div>
</div>
<script>
window.addEventListener("load", function () {
var loader = document.querySelector(".loader-wrapper");
loader.style.display = "none";
});
</script>


- Измените цвет фона меню, цвет пунктов меню и цвет этих пунктов в соответствующих местах в коде, которые указаны с помощью комментариев
- Сохраните изменения и опубликуйте страницу
И вот, наконец, вы полностью реализовали задуманное и создали свое боковое бургер меню в tilda zero block. Меню открывается нажатием на открывающую иконку, а закрывается, если нажать на закрывающую кнопку, на пункты меню или в любом месте за пределами меню.
Заключение
Боковое бургер меню в Tilda Zero Block — это не просто способ добавить функциональность на ваш сайт, это способ сделать его более интересным и удобным для пользователей. Так что не стесняйтесь экспериментировать, настраивать и создавать свой уникальный веб-опыт. Больше возможностей, больше удовольствия — это ваш путь к великолепному сайту. Не упустите шанс воспользоваться боковым бургер меню в Tilda и сделать ваш сайт неповторимым!
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda