Выпадающее меню из zero block в Tilda

Введение

Выпадающее меню — это не просто элемент дизайна, это мощный инструмент для создания совершенных веб-страниц. Если вы хотите, чтобы ваш сайт выделялся среди конкурентов и привлекал внимание пользователей, то этот стильный и функциональный элемент обязательно стоит рассмотреть. В этой статье мы расскажем вам, как создать выпадающее меню из zero block в Tilda и сделать ваш сайт более уникальным.

Зачем нужно выпадающее меню из zero block в Tilda?

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

Как создать выпадающее меню из zero block в Tilda?

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

1. Создайте два зеро блока так, чтобы они были расположены один сразу после другого
2. Создайте разделы сайта
3. Перед каждым разделом добавьте блок «Т178» – якорная ссылка
4. В каждой якорной ссылке нажмите на кнопку «Контент» и введите имя якорной ссылки
5. После всех блоков на странице создайте блок «Т178», который отвечает за плавный скролл к якорной ссылке в Тильде
6. Зайдите в редактор первого зеро блока и очистите его содержимое. Этот блок будет выполнять роль шапки сайта, из которого будет выезжать меню

7. Уменьшите высоту этого блока (В примере высота блока равна 100px)
8. Стилизуйте блок под дизайн вашего сайта
9. Нажмите на плюс и добавьте элемент, который будет вызывать выпадающее меню. В этом примере мы используем обычной текстовый блок «MENU»
10. Расположите этот элемент там, где вам удобно.
11. Нажмите правой кнопкой мыши по этому элементу и выберите «Add CSS Class Name»
12. В появившемся поле пропишите «butlink»
13. Настройте адаптивность этого блока для корректного отображения на всех размерах экранов
14. Сохраните изменения и закройте этот zero block

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

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

6. Нажмите правой кнопкой мыши на все пункты меню по очереди и выберите «Add CSS Class Name»
7. В появившемся поле пропишите класс «menuitems»
8. Настройте отображения блока для всех экранов
9. Сохраните изменения и закройте zero block
10. После всех блоков создайте html блок «Т123»
11. Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<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>

12. Скопируйте ID первого зеро блока с кнопкой и вставьте его в код, в указанное место
13. Скопируйте ID второго зеро блока с меню и вставьте его в код, в указанные места
14. В css стилях для второго зеро блока в свойстве «top» пропишите значение, равное высоте этого блока (Пример: 100px)
15. Сохраните изменения и опубликуйте страницу

Если вы следовали нашим инструкциям, то наверняка у вас получилось создать стильное и функциональное выпадающее меню из zero block в Tilda.

Заключение

Выпадающее меню — это отличный способ сделать ваш сайт более привлекательным и удобным для пользователей. Следуя нашим советам, вы сможете создать такое меню легко и быстро. Не забудьте экспериментировать с дизайном, чтобы сделать его по-настоящему уникальным!

Теперь, когда вы знаете, как создать выпадающее меню из zero block в Tilda, не упустите шанс улучшить навигацию на вашем сайте и сделать его более привлекательным для посетителей. Не забудьте поделиться своими впечатлениями и результатами в комментариях!

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

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