Готовые скрипты, мощные анимации, модификации и секретные фишки для сайтов. Всё, что нужно, чтобы твои проекты выделялись и работали без ограничений. 🚀

15:00

13 мар. 2025 г.

ru
en

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

Выделение активного пункта меню в Zero-блоке


Этот скрипт автоматически выделяет активный пункт меню в Zero-блоке. Он подсвечивает текущую страницу, чтобы пользователи могли сразу понять, в каком разделе они находятся.

Скрипт работает без дублирования кода — если у вас одинаковые меню в хедере и футере, он корректно выделит нужный пункт в обоих местах.

Как установить?

  1. Создайте Zero-блок и добавьте пункты меню.

  2. Присвойте каждому пункту CSS-класс menu.

  3. Укажите относительные ссылки (например, /services).

  4. Вставьте код в T123 и настройте стили под свой дизайн.

Подчеркивание активного пункта

Скопировать код

<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>

Изменение цвета и прозрачности активного пункта

Скопировать код

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

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

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

Прозрачность неактивных пунктов

Скопировать код

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

/* Прозрачность неактивных пунктов меню */
.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>

Дата добавления:

11 дек. 2024 г.