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

Введение

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

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

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

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

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

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

Заключение

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

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

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