Навигация меню, как подсвечивать выбранное?

голоса: 0
На сайте есть меню, при выборе определенного раздела в строке меню это раздел подсвечивается другим цветом, обозначая в каком разделе находиться пользователь. Но это работает только в модулях /news, /publ и т.д. так-же в отдельных страницах /index/...  Но мне неоюходимо допустим создать первый раздел в меню (информация 1) ссылающаяся в /publ/info/1 и второй раздел (информация 2) ссылающаяся в /publ/info/2, но у меня при выбаре раздела в меню ни чего не происходит, работает лишь если в меню указать просто /publ
Адрес сайта vdohnovenie.do.am
| Автор: | Категория: Меню сайта

Ответов: 1

голоса: 0
 
Лучший ответ
Приведите конкретный пример, по какой ссылке перейти чтобы увидеть проблему.
| Автор:
Выбор ответа лучшим | | Автор: SVnews

Если навести на раздел "Активность" он подсвечивает другим цветом, если его выбрать, то остаётся белым вместо оранжевого, так же раздел "Родителям" Все остальные меняют цвет при выборе

 

SVnews,
Вы какими цветами хотите их подсветить ?
Yuri_Geruk,

Чтоб всё работало, я просто добавил модуль блог, а так конечно же как расположено уже, белый текст, при навидении #fc6100 и выбранное в меню также было #fc6100.

Сама суть этого меню чтоб вместо модуля, например /publ где всё работает без проблем, работало в разделах данного модуля например  /publ/3

Не знаю как ещё обьяснить.Подсветка выбраного пункта меню работает только в конкретном модуле, но не работает с разделами данного модуля, при наведении пункт подсвечивается, но при выборе этого пункта, подсветки нет. Оставил специальнот для вас, если клик по "Активность"  он останется белым, если по "Родителям" оранжевый.

SVnews,

Починили. Сделали вот таким решением:

<style>
/* Активный пункт меню */
.uMenuRoot li a.active {
    color: #fc6100 !important;
}

/* Чтобы при ховере не перебивало */
.uMenuRoot li a.active:hover {
    color: #fc6100 !important;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const links = document.querySelectorAll('.uMenuRoot li a');
    const currentUrl = window.location.pathname;

    links.forEach(link => {
        let linkPath = link.getAttribute('href');
        if (!linkPath) return;

        // Главная отдельно
        if (linkPath === '/' && (currentUrl === '/' || currentUrl === '')) {
            link.classList.add('active');
            return;
        }

        // если ссылка вида /publ/13
        if (linkPath.startsWith('/publ/')) {
            const categoryId = linkPath.split('/')[2]; // 13

            if (currentUrl.includes('/publ/') && currentUrl.includes('/' + categoryId)) {
                link.classList.add('active');
            }
            return;
        }

        // обычная логика для остальных
        if (currentUrl.startsWith(linkPath)) {
            link.classList.add('active');
        }
    });
});
</script>

уже работает у вас на сайте, проверьте.

...