Делаем активный пункт меню в зеро блоке на Тильде.

Очень часто мы используем зеро блок для создания индивидуального меню. Самая большая проблема как выделить пункт при переключение так как в зеро нет такой возможности. На этот случай есть код который определяет на какой странице находится посетитель сайт и подчеркивает нужный пункт меню.

Также им удобно выделять хлебные крошки на страницах магазина, если они сделаны в зеро блоке.

Инструкция:

1. Создаем Zero блок и элементы меню в нем.

2. Задаем всем текстовым элементам класс cubemenu (кликаем на элемент правой кнопкой мыши выбираем пункт add CSS Class Name, вставляем класс.)

3. Задаем пунктам меню относительные ссылки, например /about

4. Добавляем код в блок T123 и настраиваем под свои задачи color, transition, opacity.

<!--Cubeteam.ru активное меню -->
<style>
.cubemenu * {
width: max-content !important;
display: block !important;
transition: all 0.3s ease-in-out;
}

<!-- 1 — подчеркивание активного пункта -->
.cubemenu:hover .tn-atom, .cubemenu.active .tn-atom {
border-bottom: solid 2px #1d4fff !important
}

<!-- 2 — цвет и прозрачность для активного пункта
(хлебные крошки) -->
.cubemenu:hover .tn-atom a, .cubemenu.active .tn-atom a {
color: #1d4fff !important;
opacity: 0.3;
}


.cubemenu:hover .tn-atom a, .cubemenu.active .tn-atom a {
color: #1d4fff !important;
opacity: 1;
}
</style>

<script>
var url = document.location.pathname
$('[href="'+url+'"]').parents('.t396__elem').addClass('active')
</script>