Активный пункт меню в Zero Block

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

Как сделать активный пункт в меню Zero Block, в зависимости, на какой странице находится пользователь

Пример корзины в Zero-Block

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

Инструкция

Создаём Zero Block
В зеро блок добавляем текст или кнопку*, которая будет служить пунктами меню

*кнопке не нужно задать радиус, иначе подчеркивание пункта будет немного искажено, скруглением.

Дополнительно: длину фрейма можно не подгонять к тексту "пиксель в пиксель", это уже учтено и линия подчеркивания будет заканчиваться ровно в конце текста.

3. Задайте всем элементам меню CSS класс "menu"
4. Задайте всем пунктам меню относительные (без доменного имени, начинающиеся со "/") ссылки, например /about

См. скриншот

5. При желании измените толщину "2px" и цвет подчёркивания в коде с цвета "#1d4fff" .

См. скриншот

Положение кода цвета

5. Добавляем HTML код на страницу, в блок Другое - Т123

HTML код в блок T123



<!-- АКТИВНЫЙ ПУНКТ МЕНЮ В ZERO -->
<!-- Блок представлен сайтом https://sitebelov.ru/ - Инструкции: https://sitebelov.ru/aktivnyj-punkt-menyu-v-zero-block -->

<style>
.menu * {
  width: max-content !important;
  display: block !important;
  transition: all 0.3s ease-in-out;
}
.menu:hover .tn-atom, .menu.active .tn-atom {
  border-bottom: solid 2px #1d4fff !important
}
</style>
	
<script>
var url = document.location.pathname
$('[href="'+url+'"]').parents('.t396__elem').addClass('active')
</script>