Вопрос или проблема
Я использую WordPress с темой Astra (бесплатная версия), а также Elementor Header & Footer Builder (бесплатная версия) и WP Mobile Menu (бесплатная версия). Я настроил выпадающее меню, но оно автоматически закрывается, когда я перехожу на дочернюю страницу внутри этого меню. Я хочу, чтобы выпадающее меню оставалось открытым, когда пользователи переходят на любую из дочерних страниц.
Ответ или решение
Для того чтобы сохранить выпадающее меню WordPress открытым при переходе на дочернюю страницу, необходимо внести некоторые изменения в настройки вашей темы (Astra) и плагина для создания заголовков и подвалов (Elementor Header & Footer Builder). Вот подробное руководство по решению этой проблемы:
1. Понимание проблемы
Ваше меню на сайте WordPress автоматически закрывается при переходе на дочернюю страницу. Это поведение может ожидаться в стандартных выпадающих меню, однако в случае использования Astra и Elementor есть возможность изменить это поведение, используя кастомные CSS и JavaScript.
2. Решение с помощью JavaScript
Одним из наиболее эффективных способов сохранить открытым выпадающее меню является добавление некоторых пользовательских скриптов JavaScript на ваш сайт. Вот пример кода, который можно использовать:
document.addEventListener('DOMContentLoaded', function () {
const menuItems = document.querySelectorAll('.ast-site-header .menu-item-has-children > a');
menuItems.forEach(item => {
item.addEventListener('click', function (e) {
const parent = this.parentElement;
// Если у родителя уже открыт подменю, закройте его
if (parent.classList.contains('menu-item-active')) {
e.preventDefault();
parent.classList.toggle('menu-item-active');
} else {
// Закрыть все остальные открытые подменю
menuItems.forEach(el => {
el.parentElement.classList.remove('menu-item-active');
});
parent.classList.add('menu-item-active');
}
});
});
});3. Добавление кода на сайт
Чтобы добавить этот код на ваш сайт, выполните следующие шаги:
- Войдите в панель управления WordPress.
- Перейдите в раздел "Внешний вид" -> "Редактор тем".
- Найдите файл
footer.php, чтобы добавить JavaScript в перед закрывающим тегом</body>. - Вставьте код туда, сохранить изменения.
Важно: Рекомендуем создавать дочернюю тему, чтобы изменения не потерялись при обновлении темы.
4. Настройки CSS
Хотя основной функционал уже в JavaScript, стоит убедиться, что стили вашего меню позволяют правильно отображать активные пункты. В этом случае, если это необходимо, добавьте следующий код CSS:
.menu-item-active > ul {
display: block;
}5. Проверка и тестирование
После внесения всех изменений, тщательно протестируйте меню на вашем сайте:
- Проверьте, как оно ведет себя на главной странице.
- Проверьте поведение меню при переходе на дочерние страницы.
- Убедитесь, что переходы между страницами выполняются без ошибок.
6. Альтернативные решения
Если по каким-то причинам данный метод не работает, есть еще несколько альтернативных способов:
- Плагины: Существуют специализированные плагины для управления поведением меню, как "WP Mega Menu", которые могут предоставить настройки для удерживания открытым меню.
- Обновление темы или плагина: В некоторых случаях выбранные версии Astra или Elementor могут иметь баги, которые устранены в более новых версиях. Убедитесь, что вы используете последние версии ваших плагинов и темы.
Заключение
Следуя указанным выше рекомендациям, вы сможете сохранить ваше выпадающее меню открытым при переходе на дочерние страницы. Это улучшит пользовательский опыт на вашем сайте и снизит вероятность того, что пользователи потеряют навигацию. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью на профессиональные форумы или к разработчикам.