В конструкторе Gridbox вам не нужно создавать отдельный изолированный блок для мобильной навигации. Стандартный плагин Menu обладает встроенным адаптивным механизмом, который автоматически сворачивает громоздкие десктопные ссылки в компактную кнопку-гамбургер при достижении заданного разрешения экрана.
1. Активация и выбор точки перелома (Breakpoint)
Чтобы настроить, в какой момент навигация должна переключиться в мобильный режим:
- ■ Откройте шапку сайта (Header) в визуальном редакторе и зайдите в настройки плагина Menu.
- ■ Во вкладке General найдите параметр Mobile Menu Breakpoint.
- ■ Выберите устройство, начиная с которого меню станет мобильным: Laptop, Tablet (по умолчанию) или Phone. Как только ширина экрана станет меньше выбранного лимита, стандартные ссылки скроются, и появится иконка меню.
2. Кастомизация внешнего вида и анимации
Gridbox предлагает два основных типа отображения развернутого мобильного меню:
- ■ Dropdown (Выпадающее): При клике на гамбургер меню раскрывается вертикально вниз, раздвигая или перекрывая контент под шапкой.
- ■ Sidebar / Off-Canvas (Боковая панель): Полноценная скрытая панель, которая при клике плавно выезжает слева или справа, полностью или частично перекрывая экран. Этот вариант наиболее удобен на смартфонах.
Все стили — цвет подложки боковой панели, размер и анимация самой иконки гамбургера, шрифты и отступы мобильных пунктов меню — настраиваются во вкладке Design -> Mobile Menu внутри параметров плагина.
На десктопе вложенные пункты меню открываются при наведении мыши (Hover). На мобильных экранах ховера нет, поэтому Gridbox автоматически переводит подменю в режим клика. В настройках мобильного меню вы можете выбрать опцию Collapse Submenu. Если она активна, вложенные пункты будут скрыты внутри родительского, а рядом появится аккуратная стрелочка-аккордеон. Это защищает мобильный интерфейс от превращения в бесконечную простыню текста.
3. Размещение дополнительных элементов в мобильной панели
Современные тренды требуют, чтобы в мобильном меню были не только ссылки, но и кнопки связи или соцсети. В Gridbox Off-Canvas панель является полноценным контейнером:
- ■ Переключитесь в режим редактирования Phone и кликните на гамбургер, чтобы раскрыть боковую панель.
- ■ Прямо внутрь этой открывшейся панели, под список пунктов меню, вы можете перетащить любые другие плагины из библиотеки: например, Social Icons (иконки мессенджеров) или плагин Button для быстрого звонка.
- ■ Эти дополнительные виджеты автоматически привяжутся к мобильной панели и будут видны только на смартфонах.
Если вы делаете многостраничный сайт со сложной структурой навигации, десктопное меню часто выводят через тяжелые «Мега-меню» (Mega Menu) с сетками и картинками. Такие блоки физически невозможно адекватно адаптировать под узкий экран телефона. В этом случае правильная тактика: полностью скройте десктопный плагин меню на смартфонах через опцию Hide on Devices. Рядом создайте альтернативный, легкий плагин меню, настройте его исключительно под мобильные (выберите простую плоскую структуру меню Joomla) и включите его отображение только для режимов Tablet и Phone.