Фиксированное боковое меню в Тильда зеро блок
Введение
Если вы имеете опыт в разработке веб-сайтов на платформе Tilda, то, вероятно, знаете, насколько важно обеспечить удобную навигацию для пользователей. Один из способов улучшить навигацию и сделать сайт более удобным для посетителей — добавить фиксированное боковое меню. В этой статье мы покажем, как создать фиксированное боковое меню в Tilda с использованием небольшой модификации. Меню будет адаптивным, как и контент, расположенный рядом с ним.
Что такое фиксированное боковое меню в тильда?
Фиксированное боковое меню — это меню навигации, которое остаётся на экране пользователя, даже при прокрутке страницы. Оно обеспечивает постоянный доступ к ключевым разделам сайта, повышая удобство его использования.
Как добавить фиксированное боковое меню в Тильда зеро блок?
Создать фиксированное боковое меню в Тильда zero block довольно просто. Вот пошаговая инструкция:
- Абсолютно всем блокам на вашей странице (страницах) присвойте класс «uc-content»
- Создайте зеро блок в начале страницы или в header, если ваш сайт многостраничный
- Откройте настройки блока, нажмите на ссылку «Добавить CSS Class Name» и пропишите класс «uc-sidebar»
- Откройте редактор блока, удалите из него стандартные элементы
- В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру 100
- Нажмите на кнопку «+» и выберите «Add Shape»
- В настройках шейпа нажмите на «+CONTAINER», выберите «Window Container» и расположите шейп слева и по центру
- Высоту шейпа в поле «H» сделайте 100%, а ширину в поле «W» 300px
- Стилизуйте шейп по своему усмотрению
- Добавьте на шейп текстовый элемент, который будет первым пунктом меню
- Нажмите правой кнопкой мыши по текстовому элементу и выберите «Add CSS Class Name»
- В появившемся поле пропишите класс «sidebar-items»
- В поле «URL» пропишите ссылку на соответствующую якорную ссылку
- Таким же образом создайте оставшиеся пункты меню
- Все пункт меню добавьте в «Window Container»
- Удалите цвет заливки пунктов меню, если хотите, чтобы они меняли цвет при наведении на них курсора мыши
- Удалите фоновую заливку всего блока, сохраните изменения и закройте зеро блок
- После всех блоков на странице либо в header создайте html блок «Т123»
- Нажмите на кнопку «Контент» и скопируйте в него код модификации (Код найдете после инструкции)
- В коде можно менять цвет пунктов меню, цвет при наведении, цвет активных пунктов меню, размеры самого меню и т.д.
- Сохраните изменения и опубликуйте страницу
Как настроить фиксированное боковое меню для мобильных устройств?
Модификация разработана таким образом, что при размере экрана менее 1200 пикселей (это значение можно настроить в коде) фиксированное меню скрывается. В связи с этим для мобильных устройств необходимо создать отдельное меню или изменить модификацию так, чтобы фиксированное меню преобразовывалось в бургер-меню.
Все стандартные блоки автоматически адаптируются под размер экрана, в то время как зеро-блоки нужно настраивать вручную в соответствии с нужными размерами.