Активный пункт меню в Zero блоке

Активный пункт меню в Zero блоке на Тильде

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

Установка:

Создайте Zero блок
Добавьте в него текстовые элементы, которые будут служить пунктами меню. Длину текстового фрейма можно не подгонять к тексту "пиксель в пиксель", это уже учтено и линия подчеркивания будет заканчиваться ровно в конце текста.
Задайте всем текстовым элементам класс menu
Задайте пунктам меню относительные (без доменного имени, начинающиеся со "/") ссылки, например /about
Добавьте код в T123 и настройте под свои задачи color, transition, opacity. Удалите ненужные части стилей, например 2 и 3, чтобы оставить только подчеркивание.
Наслаждайтесь =)

Версия 2 — прозрачность и цвет активного пункта

Версия 3 — прозрачность неактивных пунктов


<!-- https://ilda.top/aktivniy-punkt-menyu-v-zero-bloke -->

<style>
.menu * {
  width: max-content !important;
  display: block !important;
  transition: all 0.3s ease-in-out;
}

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

/* 2 — цвет и прозрачность для активного пункта*/
.menu:hover .tn-atom a, .menu.active .tn-atom a {
  color: #1d4fff !important;
  opacity: 0.3;
}

/* 3 — прозрачность неактивных пунктов меню */
.menu .tn-atom a {
  opacity: 0.3
}
.menu:hover .tn-atom a, .menu.active .tn-atom a {
  color: #1d4fff !important;
  opacity: 1;
}
</style>

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

Список изменений

07.11.2022

Исправлены стили для корректировки длины текстового фрейма