Очень часто мы используем зеро блок для создания индивидуального меню. Самая большая проблема как выделить пункт при переключение так как в зеро нет такой возможности. На этот случай есть код который определяет на какой странице находится посетитель сайт и подчеркивает нужный пункт меню.
Также им удобно выделять хлебные крошки на страницах магазина, если они сделаны в зеро блоке.
Инструкция:
1. Создаем Zero блок и элементы меню в нем.
2. Задаем всем текстовым элементам класс cubemenu (кликаем на элемент правой кнопкой мыши выбираем пункт add CSS Class Name, вставляем класс.)
3. Задаем пунктам меню относительные ссылки, например /about
4. Добавляем код в блок T123 и настраиваем под свои задачи color, transition, opacity.
Также им удобно выделять хлебные крошки на страницах магазина, если они сделаны в зеро блоке.
Инструкция:
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>