Столкнулся с задачей. В меню есть пункты, оба выпадающие. В одном из пунктов подключается .left.menu_ext.php (из разделов инфоблока) в другом просто .left.menu.php (на пару элементов). Сложность в том, что в обоих случаях ссылки на подменю имеют вид /services/service_name/, т.е. положить в одну папку services оба меню мы не можем, т.к. они будут выводится вместе. Притом один из пунктов верхнего уровня надо сделать неактивным (тот для которого подключается .left.menu_ext.php)
Можно, конечно, не использовать $aMenuLinks = array_merge($aMenuLinks ?? [], $aMenuLinksExt);, но как добиться раздельного вывода.
Применим небольшой костыль через JS. У нас будет два пункта меню верхнего уровня.
У первого пункта будет выводиться содержимое из разделов (.left.menu_ext.php) м сам пункт будет неактивным, у другого элементы (.left.menu.php).
.left.menu_ext.php кладем в папку services, а .left.menu.php кладем в папку priem.
Далее в шаблон компонента меню добавим JS код
Этот JavaScript-код выполняется после полной загрузки страницы и делает следующее:
1. Находит пункт меню «Приём лома», который ведёт на `/services/`, и заменяет его ссылку (`<a>`) на нерабочий элемент (`<span>`) — то есть делает его неактивным (некликабельным), сохраняя внешний вид.
2. Находит пункт меню «Услуги», который изначально ведёт на `/priem/`, и меняет его ссылку на `/services/` — то есть перенаправляет этот пункт на ту же страницу, что и «Приём лома».
Цель кода:
Поменять местами или скорректировать поведение двух пунктов меню — сделать «Приём лома» статичной надписью, а «Услуги» — активной ссылкой на `/services/`.
Можно, конечно, не использовать $aMenuLinks = array_merge($aMenuLinks ?? [], $aMenuLinksExt);, но как добиться раздельного вывода.
Применим небольшой костыль через JS. У нас будет два пункта меню верхнего уровня.
| Код |
|---|
Array( "Приём лома", "/services/", Array(), Array(), "" ), Array( "Услуги", "/priem/", Array(), Array(), "" ), |
У первого пункта будет выводиться содержимое из разделов (.left.menu_ext.php) м сам пункт будет неактивным, у другого элементы (.left.menu.php).
.left.menu_ext.php кладем в папку services, а .left.menu.php кладем в папку priem.
Далее в шаблон компонента меню добавим JS код
| Код |
|---|
<script>
document.addEventListener('DOMContentLoaded', function () {
const nav = document.getElementById('hmenu');
if (!nav) return;
// 1. Найдём пункт "Приём лома" — он ведёт на /services/
const priemLomaLink = nav.querySelector('a[href="/services/"]');
if (priemLomaLink && priemLomaLink.textContent.trim() === 'Приём лома') {
// Заменяем <a> на <span> с теми же классами и текстом
const span = document.createElement('span');
span.className = priemLomaLink.className;
span.textContent = priemLomaLink.textContent;
// Добавляем стиль при наведении через CSS-класс или инлайн (лучше через класс)
span.classList.add('nav-link-non-clickable');
priemLomaLink.parentNode.replaceChild(span, priemLomaLink);
}
// 2. Найдём пункт "Услуги" — он ведёт на /priem/
const uslugiLink = nav.querySelector('a[href="/priem/"]');
if (uslugiLink && uslugiLink.textContent.trim() === 'Услуги') {
uslugiLink.href = '/services/';
}
});
</script> |
Этот JavaScript-код выполняется после полной загрузки страницы и делает следующее:
1. Находит пункт меню «Приём лома», который ведёт на `/services/`, и заменяет его ссылку (`<a>`) на нерабочий элемент (`<span>`) — то есть делает его неактивным (некликабельным), сохраняя внешний вид.
2. Находит пункт меню «Услуги», который изначально ведёт на `/priem/`, и меняет его ссылку на `/services/` — то есть перенаправляет этот пункт на ту же страницу, что и «Приём лома».
Цель кода:
Поменять местами или скорректировать поведение двух пунктов меню — сделать «Приём лома» статичной надписью, а «Услуги» — активной ссылкой на `/services/`.
Изменено: - 22.10.2025 14:02:36