Выпадающее меню из zero block в Tilda
Содержимое
Введение
Выпадающее меню — это не просто элемент дизайна, это мощный инструмент для создания совершенных веб-страниц. Если вы хотите, чтобы ваш сайт выделялся среди конкурентов и привлекал внимание пользователей, то этот стильный и функциональный элемент обязательно стоит рассмотреть. В этой статье мы расскажем вам, как создать выпадающее меню из zero block в Tilda и сделать ваш сайт более уникальным.
Зачем нужно выпадающее меню из zero block в Tilda?
Прежде чем мы углубимся в детали, давайте разберемся, почему выпадающее меню из zero block в Tilda так важно. Когда пользователь заходит на ваш сайт, первое, что он видит — это дизайн. И здесь ключевым элементом является навигация. Но навигация на сайтах в стандартном видео уже устарела. В 2023 году и дальше в приоритете будет минимализм. Чем меньше элементов на виду, тем лучше. Именно выпадающее меню из zero block в Tilda может сделать навигацию более удобной и привлекательной.
Как создать выпадающее меню из zero block в Tilda?

Теперь, когда мы поняли важность выпадающего меню из zero block в Tilda, давайте разберемся, как его создать:
- Создайте два зеро блока так, чтобы они были расположены один сразу после другого
- Создайте разделы сайта
- Перед каждым разделом добавьте блок «Т178» – якорная ссылка
- В каждой якорной ссылке нажмите на кнопку «Контент» и введите имя якорной ссылки
- После всех блоков на странице создайте блок «Т178», который отвечает за плавный скролл к якорной ссылке в Тильде
- Зайдите в редактор первого зеро блока и очистите его содержимое. Этот блок будет выполнять роль шапки сайта, из которого будет выезжать меню
- Уменьшите высоту этого блока (В примере высота блока равна 100px)
- Стилизуйте блок под дизайн вашего сайта
- Нажмите на плюс и добавьте элемент, который будет вызывать выпадающее меню. В этом примере мы используем обычной текстовый блок «MENU»
- Расположите этот элемент там, где вам удобно.
- Нажмите правой кнопкой мыши по этому элементу и выберите «Add CSS Class Name»
- В появившемся поле пропишите «butlink»
- Настройте адаптивность этого блока для корректного отображения на всех размерах экранов
- Сохраните изменения и закройте этот zero block
В процессе предыдущих действий мы создали разделы сайта, присвоили им якорные ссылки, а также подготовили шапку с кнопкой, которая будет вызывать выпадающее меню из zero block в Tilda. Теперь займемся созданием самого меню:

- Зайдите в редактор второго зеро блока
- Очистите все лишние элементы из него
- Весь это блок будет одним большим выпадающим меню. Поэтому по всей его площади вы можете создавать пункты меню, добавлять логотипы и другую важную информацию
- Создайте необходимые вам пункты меню
- Для каждого пункта меню в поле «URL» пропишите имя соответствующей якорной ссылки через хештег (Пример: Имя якорной ссылки «about», ссылка в url «#about»)

- Нажмите правой кнопкой мыши на все пункты меню по очереди и выберите «Add CSS Class Name»
- В появившемся поле пропишите класс «menuitems»
- Настройте отображения блока для всех экранов
- Сохраните изменения и закройте zero block
- После всех блоков создайте html блок «Т123»
- Нажмите на кнопку «Контент» и скопируйте в него следующий код:
<style>
/*ID зеро блока с кнопкой*/
#rec660034088 {
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
/*ID зеро блока с меню*/
#rec660035625 {
position: fixed;
width: 100%;
top: 110px; /*Высота зеро блока с кнопкой*/
z-index: 9;
display: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
}
.butlink, .menuitems {
cursor: pointer;
}
</style>
<script>
var recElement = $('#rec660035625'); // ID зеро блока с меню
var menuButton = $('.butlink');
var menuItems = $('.menuitems');
var showTimeoutId;
var hideTimeoutId;
menuButton.click(function() {
if (recElement.is(':visible')) {
clearTimeout(showTimeoutId);
hideTimeoutId = setTimeout(function() {
recElement.slideUp(250, function() {
t_lazyload_update();
});
}, 100);
} else {
showTimeoutId = setTimeout(function() {
recElement.slideDown(250, function() {
t_lazyload_update();
});
}, 500);
}
});
menuItems.click(function() {
clearTimeout(showTimeoutId);
hideTimeoutId = setTimeout(function() {
recElement.slideUp(250, function() {
t_lazyload_update();
});
}, 100);
});
$(document).click(function() {
if (recElement.is(':visible')) {
clearTimeout(showTimeoutId);
hideTimeoutId = setTimeout(function() {
recElement.slideUp(250, function() {
t_lazyload_update();
});
}, 100);
}
});
recElement.click(function(event) {
event.stopPropagation();
});
menuButton.click(function(event) {
event.stopPropagation();
});
menuItems.click(function(event) {
event.stopPropagation();
});
</script>


- Скопируйте ID первого зеро блока с кнопкой и вставьте его в код, в указанное место
- Скопируйте ID второго зеро блока с меню и вставьте его в код, в указанные места
- В css стилях для второго зеро блока в свойстве «top» пропишите значение, равное высоте этого блока (Пример: 100px)
- Сохраните изменения и опубликуйте страницу
Если вы следовали нашим инструкциям, то наверняка у вас получилось создать стильное и функциональное выпадающее меню из zero block в Tilda.
Заключение
Выпадающее меню — это отличный способ сделать ваш сайт более привлекательным и удобным для пользователей. Следуя нашим советам, вы сможете создать такое меню легко и быстро. Не забудьте экспериментировать с дизайном, чтобы сделать его по-настоящему уникальным!
Теперь, когда вы знаете, как создать выпадающее меню из zero block в Tilda, не упустите шанс улучшить навигацию на вашем сайте и сделать его более привлекательным для посетителей. Не забудьте поделиться своими впечатлениями и результатами в комментариях!
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda