Стандартное поведение навигации в Gridbox настроено на событие наведения (Hover), что нередко приводит к случайному закрытию выпадающего списка при смещении мыши. Это руководство позволяет переключить выпадающие пункты на открытие строго по клику (Click Event) с автоматическим закрытием при клике в любую свободную область страницы.
1 Назначение суффикса класса плагину меню
Открой страницу в редакторе Gridbox, выдели плагин Главное меню (Main Menu), перейди в его настройки и в поле Class Suffix добавь класс:
Class Suffix
dropdown-click2 Отключение hover и настройка стилей (CSS)
Перейди в Инструменты ➝ Редактор кода ➝ CSS и добавь правила, отключающие стандартное всплытие при наведении и активирующие показ только по активному классу:
CSS
/* Блокировка стандартного открытия меню по hover */.dropdown-click .main-menu > .nav > li.deeper:hover > .dropdown-menu { display: none !important; opacity: 0 !important; visibility: hidden !important;}/* Открытие меню только при наличии активного класса */.dropdown-click .main-menu > .nav > li.deeper.open-dropdown > .dropdown-menu { display: block !important; opacity: 1 !important; visibility: visible !important;}/* Курсор указателя для родительских пунктов с подменю */.dropdown-click .main-menu > .nav > li.deeper > a,.dropdown-click .main-menu > .nav > li.deeper > span { cursor: pointer;}3 Обработка событий клика (JavaScript)
Перейди во вкладку Инструменты ➝ Редактор кода ➝ JavaScript и добавь скрипт управления переключением списков:
JavaScript
document.addEventListener('DOMContentLoaded', () => { const parentItems = document.querySelectorAll('.dropdown-click .main-menu > .nav > li.deeper'); parentItems.forEach(item => { const trigger = item.querySelector(':scope > a, :scope > span'); if (!trigger) return; trigger.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); // Закрываем другие открытые подменю на том же уровне parentItems.forEach(otherItem => { if (otherItem !== item) { otherItem.classList.remove('open-dropdown'); } }); // Переключаем текущее выпадающее меню item.classList.toggle('open-dropdown'); }); }); // Закрытие выпадающего списка при клике в любое место вне меню document.addEventListener('click', (e) => { if (!e.target.closest('.dropdown-click')) { parentItems.forEach(item => item.classList.remove('open-dropdown')); } });});Обрати внимание:
Для родительских пунктов в меню Joomla создавай тип «Заголовок меню» (Menu Heading) или «URL» со значением #, чтобы при первом тапе или клике страница не перезагружалась, а раскрывался список.