Состояние активного элемента меню для всех элементов меню

Содержание

Вопрос или проблема
Ответ или решение
Проблема активного состояния элементов меню
Решения
Заключение

Вопрос или проблема

Моя домашняя страница представляет собой одностраничный сайт, и я создал меню с якорными ссылками, по которым пользователи могут навигировать по разделам. Когда пользователь находится на подстранице, например, в списке постов и кликает на элемент меню, он возвращается к определённому разделу домашней страницы.

Мои якоря выглядят так:

/
/#about
/#products

и так далее.

Я использую Bem_Menu_Walker для имен классов BEM.

Проблема в том, что когда я нахожусь на домашней странице, все мои ссылки устанавливаются в активное состояние. Есть идеи, почему это происходит и как это исправить?

Спасибо.

Пробовали ли вы деактивировать Bem_Menu_Walker, чтобы выяснить, решает ли это проблему?

Я бы предложил удалить плагин и вместо этого либо отрегулировать CSS, либо добавить имена классов через управление меню. (Каждый элемент меню позволяет вам добавить класс, если это всё, что вам нужно.) Или создайте своего собственного пользовательского walker.

Поскольку это все якоря, вам может понадобиться написать немного JavaScript, который добавляет обработчик событий к вашему меню. Когда происходит событие клика/тапа, JS должен удалить активный класс с того элемента, на котором он находится, и добавить активный класс к элементу, по которому кликнули/тапнули.

Ответ или решение

Конечно! Давайте разберёмся с вашей проблемой более подробно.

Проблема активного состояния элементов меню

Вы упомянули, что ваши элементы меню на главной странице (одностраничном сайте) получают состояние "активно", когда вы находитесь на подстранице. Это происходит из-за того, что состояние "активно" меню определяется в зависимости от URL, который анализируется. В вашем случае все меню ссылок к главной странице имеют одинаковый префикс ("/"), поэтому они все могут считаться активными.

Решения

Корректная установка активного состояния:
Чтобы решить эту проблему, необходимо модифицировать логику определения активного состояния для ваших пунктов меню.
- Проверьте, как именно ваш Bem_Menu_Walker устанавливает класс активного состояния. Обычно это делается с использованием current-menu-item, current_page_item и других классов, которые определяются WordPress. Вам может потребоваться изменить код вашего "walker", чтобы он корректно работал с якорными ссылками.
Использование JavaScript для динамического изменения активного состояния:
Если изменение логики вашего "walker" не помогает, можно добавить JavaScript для управления активным состоянием элементов вашего меню. Например, вы можете добавить обработчик события для кликов на ваши пункты меню, который будет удалять класс "активный" у всех элементов и добавлять его к текущему:
```
document.addEventListener("DOMContentLoaded", function() {
   const menuItems = document.querySelectorAll('nav a'); // Предполагается, что ваше меню находится в nav

   menuItems.forEach(item => {
       item.addEventListener('click', function() {
           menuItems.forEach(link => link.classList.remove('active')); // Удаляем класс active у всех
           this.classList.add('active'); // Добавляем класс active к текущему
       });
   });
});
```
Gravity Form/Custom Classes:
Вы также можете использовать стандартный интерфейс WordPress для добавления классов к элементам меню. Это сделает ваш код более понятным, и вы сможете управлять стилями через CSS без необходимости написания JavaScript.
Обновление CSS:
Возможно, вам потребуется обновить CSS для правильного отображения активного состояния, чтобы элементы меню были визуально выделены как активные.

Заключение

Существует несколько подходов, чтобы корректно управлять активным состоянием меню на вашем одностраничном сайте. Выберите тот метод, который вам наиболее удобен: модификация вашего Bem_Menu_Walker, добавление JavaScript для динамического управления, или управление через интерфейс WordPress.

Если у вас остались вопросы или требуется дополнительная помощь, пожалуйста, дайте знать!