SEO и реклама
Разработка сайтов
UX/UI Дизайн
API Интеграции
Моб. разработка
- Дизайн моб. приложений
Узнать стоимость проекта
Автоматически выделяет цветом текущий раздел в меню. Работает с любыми ссылками в Zero Block, корректно определяет активную страницу
Подсветка активного пункта меню в Zero Block — только цвет
Инструкция
Создайте пункты меню в Зеро-блок Тильда и вставьте ссылки
Вставьте код в блок "Другое" - Т123 в подвал вашего сайта
Замените '#F73859'; на свой цвет активной ссылки
Код для вставки:
Код написан на коленке, используйте осторожно. Не оказываем поддержку и доработку модификаций!
<!-- Подсветка активного пункта меню в Zero Block — только цвет | youx.agency -->
<!-- https://youx.agency/podsvetka-aktivnogo-punkta-menyu-tilda -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const currentUrl = window.location.href.split('?')[0].replace(/\/$/, '');
const menuLinks = document.querySelectorAll('.tn-atom a');
menuLinks.forEach(link => {
let href = link.getAttribute('href');
if (!href) return;
let cleanHref = href.split('?')[0].replace(/\/$/, '');
if (cleanHref.startsWith('/')) {
cleanHref = window.location.origin + cleanHref;
}
if (currentUrl === cleanHref ||
currentUrl === cleanHref + '/' ||
cleanHref === currentUrl + '/') {
// Измените цвет на свой
link.style.color = '#F73859';
}
});
});
</script>