LIFEHACKOV.RU

Tilda Publishing

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

Введение

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Сайт функционирует за счет рекламы

Пожалуйста, выключи блокировщик рекламы, чтобы продолжить пользоваться сайтом