UP TITLE
Фиксированное боковое меню в Тильда зеро блок

Если у вас есть опыт в создании веб-сайтов с использованием платформы Tilda, то вы, вероятно, знакомы с тем, насколько важно иметь эффективную навигацию для пользователей. Одним из способов улучшить навигацию и повысить удобство пользования вашим сайтом является добавление фиксированного бокового меню. В этой статье мы разберем как создать фиксированное боковое меню в тильда, используя небольшую tilda модификацию. Меню будет адаптивным, как и вес контент рядом с ним.

Что такое фиксированное боковое меню в тильда?
Фиксированное боковое меню — это навигационное меню, которое остается видимым на экране пользователя, даже когда он прокручивает страницу вниз. Это обеспечивает постоянный доступ к важным разделам сайта, что делает его более удобным для пользователей.
Как добавить фиксированное боковое меню в Тильда зеро блок?
Создать фиксированное боковое меню в Тильда zero block довольно просто. Вот пошаговая инструкция:
  1. Абсолютно всем блокам на вашей странице (страницах) присвойте класс «uc-content»
  2. Создайте зеро блок в начале страницы или в header, если ваш сайт многостраничный
  3. Откройте настройки блока, нажмите на ссылку «Добавить CSS Class Name» и пропишите класс «uc-sidebar»
  4. Откройте редактор блока, удалите из него стандартные элементы
  5. В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру 100
  6. Нажмите на кнопку «+» и выберите «Add Shape»
  7. В настройках шейпа нажмите на «+CONTAINER», выберите «Window Container» и расположите шейп слева и по центру
  8. Высоту шейпа в поле «H» сделайте 100%, а ширину в поле «W» 300px
  9. Стилизуйте шейп по своему усмотрению
  10. Добавьте на шейп текстовый элемент, который будет первым пунктом меню
  11. Нажмите правой кнопкой мыши по текстовому элементу и выберите «Add CSS Class Name»
  12. В появившемся поле пропишите класс «sidebar-items»
  13. В поле «URL» пропишите ссылку на соответствующую якорную ссылку
  14. Таким же образом создайте оставшиеся пункты меню
  15. Все пункт меню добавьте в «Window Container»
  16. Удалите цвет заливки пунктов меню, если хотите, чтобы они меняли цвет при наведении на них курсора мыши
  17. Удалите фоновую заливку всего блока, сохраните изменения и закройте зеро блок
  18. После всех блоков на странице либо в header создайте html блок «Т123»
  19. Нажмите на кнопку «Контент» и скопируйте в него код модификации (Код найдете после инструкции)
  20. В коде можно менять цвет пунктов меню, цвет при наведении, цвет активных пунктов меню, размеры самого меню и т.д.
  21. Сохраните изменения и опубликуйте страницу
<style>
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.uc-sidebar {
    width: 300px; /* Ширина бокового меню */
    position: fixed;
    top: 0;
    left: 0;
}
.uc-container2 {
    width: 300px;  /* Ширина бокового контейнера */
    min-width: 300px;  /* Ширина бокового контейнера */
}
.sidebar-items {
    color: white; /* Цвет пункта меню */
}

.sidebar-items:hover {
    color: red; /* Цвет пункта меню при наведении */
    cursor: pointer;
}

.sidebar-items.active {
    color: red; /* Цвет активного пункта меню */
    border-bottom: 2px solid red; /* Размер и цвет нижнего подчеркивания пункта меню */
}
.uc-content {
    width: 100%;
}

@media screen and (max-width: 1200px) {
    .uc-container2 {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .t-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .t-prefix_2 {
        padding-left: 0px;
    }

    .t-col {
        margin: 0;
        padding: 0px 20px;
    }
}
</style>

<div class='uc-container' style='display: flex;justify-content: space-between; width: 100%;'>
    <div class='uc-container2'></div>
    <div class='uc-container3' style='width:100%;  display: flex; flex-direction: column; align-items: center; justify-content: center;'></div>
    
</div>
 
<script>
document.addEventListener("DOMContentLoaded",function(){var ucContainer2=document.querySelector('.uc-container2');var ucSidebar=document.querySelector('.uc-sidebar');ucContainer2.appendChild(ucSidebar);var ucContainer3=document.querySelector('.uc-container3');var ucContents=document.querySelectorAll('.uc-content');ucContents.forEach(function(ucContent){ucContainer3.appendChild(ucContent)});const sidebarItems=document.querySelectorAll('.sidebar-items');sidebarItems.forEach(function(item){item.addEventListener('click',function(){sidebarItems.forEach(function(item){item.classList.remove('active')});this.classList.add('active')})})});
</script>
Как настроить фиксированное боковое меню для мобильных устройств?
Модификация разработана так, что при размере экрана меньше 1200 пикселей (это значение регулируется в коде) фиксированное меню исчезает. Соответственно, для мобильных устройств нужно создать отдельное меню, либо изменить модификацию так, чтобы фиксированное меню перестраивалось в бургер меню.
Все стандартные блоки автоматически будут адаптироваться под размер экрана, а зеро блоки нужно подгонять под нужные размеры вручную.
Заключение
Добавление фиксированного бокового меню в Тильда зеро блок — это простой и эффективный способ улучшить навигацию на вашем сайте. Это поможет повысить удобство пользования вашим ресурсом и улучшить пользовательский опыт. Пользуйтесь этим инструментом, чтобы сделать ваш сайт более функциональным и привлекательным для посетителей.
Часто задаваемые вопросы (FAQs)
  1. Как изменить дизайн фиксированного бокового меню?
  • Вы можете изменить дизайн бокового меню, используя CSS-стили в коде или настройки в редакторе нулевого блока.
  1. Можно ли добавить иконки в боковое меню?
  • Да, вы можете добавить иконки и любые элементы на shape в зеро блоке, что сделает его более наглядным и привлекательным.
  1. Как сделать боковое меню адаптивным?
  • Меню по умолчанию адаптивное и скрывается при размере экрана меньше 1200 пикселей. Это значение регулируется в коде.
  1. Как добавить анимацию к боковому меню?
  • Чтобы добавить анимацию к боковому меню, используйте базовую или пошаговую анимацию элементов в зеро блоке. Вы можете создать эффекты появления, исчезания или сдвига для более привлекательного внешнего вида меню.

© Mark Lungrin
Made on
Tilda