JUX Vertical Menu - Расширение Joomla

Руководство по настройке JUX Vertical Menu для Joomla

JUX Vertical Menu нужен не просто для замены обычного горизонтального меню красивой боковой панелью. В Joomla такой модуль становится связующим звеном между структурой меню, позициями шаблона, назначением модуля на страницы, поведением подменю и тем, как посетитель фактически переходит по разделам сайта. В этом руководстве разберём, как подготовить сайт, установить расширение, выбрать режим вывода, настроить уровни, стили, off-canvas-поведение, изображения в пунктах меню, модули внутри подменю и проверить результат без риска сломать навигацию.

Материал рассчитан на владельца или администратора Joomla-сайта, который уже понимает, что такое меню и модули, но хочет собрать аккуратную боковую или выезжающую навигацию без хаотичных экспериментов. Мы не будем пересказывать рекламную карточку продукта. Вместо этого пройдём весь путь: от проверки исходного меню до диагностики ситуаций, когда пункт не раскрывается, off-canvas не появляется, модуль показан не на тех страницах или стили конфликтуют с шаблоном.

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

Что именно решает вертикальное меню на Joomla-сайте

В стандартной Joomla меню создаётся как дерево пунктов, а показывается через модуль. Это удобно, но обычный горизонтальный вывод плохо подходит для каталогов, баз знаний, корпоративных разделов, учебных материалов, многоуровневых услуг и магазинов с длинными списками категорий. Когда пунктов становится много, верхняя навигация либо растягивается, либо прячет важные разделы в несколько уровней выпадающих списков. Посетитель видит не структуру сайта, а набор коротких слов, часть которых открывается только при наведении.

JUX Vertical Menu предлагает другой подход: меню можно разместить вертикальной колонкой в позиции шаблона или вывести как off-canvas-панель, которая открывается по действию пользователя. В официальном описании продукта и на демонстрационной странице выделены оба режима: статичное положение и скрытая выезжающая панель. Это важно для практики, потому что один и тот же набор пунктов может работать по-разному в зависимости от задачи страницы.

Статичный вариант уместен там, где навигация является постоянным ориентиром. Например, в разделе документации слева можно держать главы, подразделы и быстрые переходы. В карточке категории интернет-магазина вертикальная панель помогает пройти по группам товаров. В корпоративном сайте она подходит для услуг, департаментов, филиалов и внутренних разделов. Off-canvas лучше там, где меню нужно держать рядом, но оно не должно занимать место: на мобильных экранах, в промо-страницах, в длинных статьях или в шаблонах с ограниченной шириной.

Чем JUX Vertical Menu отличается от обычного модуля Menu

Обычный модуль Menu в Joomla тоже умеет выбирать меню, уровни, базовый пункт и назначение на страницы. Но JUX Vertical Menu добавляет визуальную и поведенческую надстройку: темы, ширину меню, раскрытие нескольких веток, настройки верхнего меню, подменю и пунктов, а также отдельные параметры для пунктов меню через пакет расширенных параметров. В документации JoomlaUX отдельно перечислены вкладки настройки модуля, стили верхнего меню, стили подменю, стили пунктов и параметры текущего пункта.

Именно поэтому расширение стоит рассматривать как специализированный навигационный модуль. Оно не заменяет структуру Joomla и не создаёт контент само по себе. Оно берёт уже подготовленное меню, применяет к нему выбранную логику вывода и помогает получить более плотную, управляемую и адаптивную навигацию.

Когда вертикальная навигация лучше горизонтальной

Вертикальный формат особенно полезен, если у разделов разная длина названий, есть несколько уровней вложенности или посетителю важно видеть соседние пункты рядом с текущей страницей. Горизонтальная строка хороша для 5-7 главных направлений, но быстро теряет читаемость, когда появляются длинные названия вроде "Сервисное обслуживание оборудования", "Документы для партнёров" или "Категории по типу применения".

Вертикальная колонка даёт больше места тексту, проще показывает вложенность и не вынуждает администратора искусственно сокращать названия. Off-canvas сохраняет эту же логику, но прячет меню до момента открытия. В обоих случаях полезно заранее решить, что важнее: постоянная видимость структуры или экономия места на экране.

Кому подойдёт JUX Vertical Menu, а кому лучше выбрать другой подход

Расширение подойдёт сайтам, где навигация действительно сложнее одной верхней строки. Это могут быть каталоги услуг, интернет-магазины на Joomla-компонентах, порталы с разделами, блоги с длинными рубриками, обучающие сайты, документация, сайты учреждений, справочники и корпоративные базы знаний. В таких проектах вертикальное меню помогает показать структуру без перегрузки шапки.

Для простого лендинга, сайта из нескольких страниц или шаблона, где уже есть качественная мобильная навигация, JUX Vertical Menu может оказаться лишним. Если меню содержит только "Главная", "О нас", "Услуги", "Контакты", дополнительный модуль создаст больше настроек, чем пользы. Также стоит осторожно подходить к случаям, когда шаблон уже имеет собственный off-canvas-механизм. Два независимых выезжающих меню могут конфликтовать по слоям, кнопкам открытия, затемнению фона или прокрутке.

Хороший признак для установки - у сайта есть меню с несколькими группами, посетителю нужно быстро перемещаться между соседними разделами, а текущий шаблон не даёт достаточно гибкой боковой или выезжающей навигации. Если же задача сводится только к цвету верхнего меню, разумнее сначала проверить настройки шаблона и обычного модуля Menu.

Сценарии, где модуль раскрывается лучше всего

• Каталог товаров или услуг, где нужно показать категории, подкатегории и быстрый переход к популярным разделам.
• База знаний, где посетитель читает статью и должен видеть соседние темы.
• Корпоративный сайт, где раздел "Услуги" имеет много вложенных направлений и не помещается в шапку.
• Сайт с мобильной аудиторией, где off-canvas-панель удобнее длинной верхней строки.
• Раздел с промо-страницами, где меню нужно открывать по кнопке, не занимая первый экран.

Ситуации, где лучше не спешить

Не стоит ставить модуль только потому, что "вертикальное меню выглядит современно". Если структура сайта не продумана, новый модуль лишь красиво покажет хаос. Сначала нужно привести в порядок дерево пунктов, удалить дубли, проверить родительские связи и решить, какие уровни должны быть видны. Также не стоит использовать off-canvas как единственный способ доступа к критически важным разделам без проверки клавиатуры, фокуса, мобильной прокрутки и поведения при отключённом или задержанном JavaScript.

Как спроектировать дерево меню до настройки модуля

JUX Vertical Menu берёт структуру из Joomla, поэтому качество результата начинается до открытия настроек самого расширения. Если дерево меню построено случайно, модуль честно покажет эту случайность: длинные списки, неравные ветки, непонятные родительские пункты, дубли и служебные страницы. Перед настройкой полезно сделать короткое навигационное проектирование: решить, какие разделы действительно должны быть рядом, какие лучше оставить в контенте, а какие не должны попадать в публичное меню вообще.

Начинайте с задачи посетителя. В каталоге он обычно ищет категорию, тип услуги или группу товаров. В базе знаний - тему, главу или проблему. В корпоративном разделе - направление, отдел или документ. Если вы строите меню по внутренней структуре компании, оно может быть логичным для администраторов, но неудобным для внешнего пользователя. Вертикальное меню хорошо показывает иерархию, но не исправляет неверно выбранный принцип группировки.

Разделяйте навигацию по смыслу, а не по количеству пунктов

Иногда администратор пытается сделать все ветки одинаковыми по длине: в каждой группе по пять пунктов, одинаковые уровни, похожие названия. Для живого сайта это не обязательно. Важнее, чтобы пользователь понимал, почему эти пункты находятся вместе. Если раздел "Поддержка" имеет два пункта, а "Каталог" - пятнадцать, это нормально. Не нужно искусственно переносить страницы только ради визуальной симметрии.

Для JUX Vertical Menu особенно важно не дробить верхний уровень слишком мелко. Каждый пункт первого уровня становится крупной навигационной опорой. Если таких пунктов много, посетитель перестаёт сканировать меню и начинает читать его как длинный список. Хорошая практика - оставить верхний уровень для 5-9 направлений, а детали увести во второй уровень. Если направлений больше, возможно, нужен отдельный каталог, фильтр или несколько локальных меню.

Решите, что делать с родительскими пунктами

У родительского пункта может быть собственная страница, а может быть только роль группы. В Joomla встречаются оба подхода: пункт ведёт на обзор раздела или работает как заголовок для дочерних ссылок. Для вертикального меню это решение влияет на ожидание пользователя. Если родитель выглядит как обычная ссылка, посетитель будет ждать перехода. Если он раскрывает подменю, но не ведёт на страницу, это должно быть понятно поведением и стилем.

Не делайте родителя пустой ссылкой без причины. Лучше создать обзорную страницу раздела с кратким объяснением, ссылками на основные подразделы и контекстом. Тогда пользователь, который нажал на родителя, не попадает в тупик. Если же родитель нужен только как группа, проверьте, как JUX Vertical Menu показывает такой тип пункта и не вызывает ли он путаницу в off-canvas-режиме.

Сколько уровней показывать

Официальные источники указывают поддержку нескольких уровней, но практический предел зависит от длины пунктов и экрана. На десктопе боковая колонка может выдержать 2-3 уровня. На мобильном третий уровень уже часто требует прокрутки и аккуратных отступов. Если дерево глубже, подумайте, нужно ли показывать всё в меню. Глубинные материалы можно связать через страницу раздела, блок "Следующий шаг", хлебные крошки или внутренние ссылки.

Правильный вопрос не "сколько уровней поддерживает модуль", а "сколько уровней посетитель сможет использовать без раздражения". Для справочника это может быть больше, для промо-сайта - меньше. Для интернет-магазина длинная иерархия может быть оправдана, но её лучше сочетать с поиском, фильтрами и понятными категориями.

Черновая схема перед переносом в Joomla

• Выпишите все пункты, которые хотите показать в вертикальном меню.
• Отметьте пункты, которые должны быть видны постоянно.
• Сгруппируйте дочерние страницы по задаче посетителя, а не по внутреннему отделу.
• Удалите дубли и страницы, которые нужны только для технических маршрутов.
• Проверьте, можно ли понять назначение каждого родителя без открытия дочерних пунктов.
• Отдельно отметьте пункты, где уместны изображения или модульное содержимое.

После такой схемы настройки JUX Vertical Menu становятся понятнее. Вы уже знаете, какое меню выбрать, какие уровни показывать, где нужна одна раскрытая ветка, а где допустимо несколько, какие пункты требуют визуального выделения и какие страницы должны получить назначение модуля.

Что проверить перед установкой

Подготовка начинается не с загрузки ZIP-архива, а с ревизии меню Joomla. Официальная документация Joomla напоминает базовую механику: меню само по себе не появляется в публичной части сайта, его выводит модуль, назначенный в позицию шаблона и на нужные страницы. JUX Vertical Menu следует той же логике, поэтому ошибки чаще связаны не с самим расширением, а с исходным деревом пунктов, позицией, назначением и правами доступа.

Проверьте дерево пунктов меню

Откройте нужное меню в админ-панели Joomla и посмотрите на порядок пунктов. Родительские и дочерние элементы должны быть выстроены так, как их должен увидеть посетитель. Если в дереве есть скрытые пункты, разделители, пункты с ограниченным доступом или элементы, выключенные из отображения, заранее зафиксируйте, зачем они нужны. Вертикальное меню особенно чувствительно к неаккуратной вложенности: случайно вложенный раздел может уйти на второй или третий уровень и выглядеть как пропавший.

Минимальная проверка структуры

• У каждого дочернего пункта выбран правильный родитель.
• Порядок пунктов совпадает с логикой посетителя, а не с историей добавления страниц.
• Служебные пункты не попадают в меню, если они нужны только для маршрутизации.
• У пунктов с ограниченным доступом настроены группы, иначе часть посетителей увидит пустые ветки.
• Названия пунктов достаточно короткие для боковой панели, но не теряют смысл.

Проверьте позиции шаблона

Для статичного режима нужна реальная позиция шаблона: левая колонка, правая колонка, специальная зона навигации или другая область, которую шаблон выводит на нужных страницах. Если такой позиции нет, модуль можно создать и настроить, но посетитель его не увидит. В Joomla позиции шаблона и назначение модуля работают вместе: позиция отвечает за место на странице, назначение - за страницы, на которых модуль появляется.

Перед установкой полезно включить предпросмотр позиций шаблона или открыть документацию вашего шаблона. Особенно внимательно проверьте страницы материалов, категорий и компонентов магазина: некоторые шаблоны показывают боковую колонку в списке категорий, но скрывают её в полной статье или карточке товара. Это частая причина жалобы "модуль есть на одной странице, но пропадает на другой".

Проверьте совместимость по источникам, а не по памяти

JED и карточка JoomlaUX указывают совместимость JUX Vertical Menu с актуальными ветками Joomla, а changelog фиксирует добавление поддержки Joomla 6 и исправления, связанные с несколькими модулями на странице. При этом страница документации содержит старый блок системных требований, похожий на унаследованный фрагмент от ранней документации. Поэтому в рабочем решении лучше опираться на более свежие карточки продукта и JED, а устаревший блок требований считать сигналом для проверки на тестовой копии.

Практическое правило: перед установкой на боевой сайт проверьте модуль на копии с той же версией Joomla, PHP, шаблоном и набором расширений. Навигационный модуль затрагивает все страницы, где он опубликован, поэтому тестовая проверка важнее уверенности по одной строке совместимости.

Установка и первичная публикация модуля

Официальная документация JoomlaUX называет установочный пакет pkg_jux_verticalmenu.zip и описывает установку через раздел загрузки пакета расширения. В современных версиях Joomla общий смысл такой же: вы устанавливаете ZIP-пакет через менеджер расширений, затем находите созданный модуль в списке site-модулей, выбираете меню, позицию, назначение и публикуете его. Не нужно изменять ядро Joomla, шаблонные файлы или код расширения.

Если вы устанавливаете пакет вручную, убедитесь, что это именно установочный ZIP, а не архив, который надо распаковать и внутри которого лежит другой пакет. JED-документация по установке расширений отдельно подчёркивает, что Joomla распознаёт установочные архивы, а не произвольные наборы файлов. Если установка заканчивается ошибкой, не пытайтесь распаковывать всё подряд в корень сайта. Сначала проверьте имя пакета, размер загрузки, лимиты сервера и инструкции разработчика.

Базовый порядок действий

1. Сделайте резервную копию сайта или работайте на тестовой копии.
2. Откройте раздел установки расширений Joomla и загрузите пакет pkg_jux_verticalmenu.zip.
3. После установки перейдите в список site-модулей и найдите модуль JUX Vertical Menu.
4. Откройте модуль, выберите исходное Joomla-меню в поле Select Menu.
5. Задайте стартовый и конечный уровни, если нужно показывать только часть дерева.
6. Выберите режим позиции: обычная модульная позиция или off-canvas, если нужен выезжающий вариант.
7. Назначьте позицию шаблона и страницы показа на вкладке назначения меню.
8. Сохраните модуль, откройте сайт в обычном окне браузера и проверьте результат.

Что проверить сразу после установки

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

Не смешивайте диагностику установки и стилизацию. Сначала добейтесь правильного вывода простого меню, потом меняйте цвета, типографику и анимацию. Это экономит время: если вы одновременно меняете позицию, уровни, тему, ширину и CSS, потом сложно понять, какая настройка дала ошибку.

Карта настроек модуля: от выбора меню до ширины панели

Самый полезный раздел в документации JoomlaUX - блок настройки модуля. В нём перечислены параметры, которые определяют логику вывода: Select Menu, Start level, End Level, выбор позиции меню, тема, Multi Expand Items и Menu Max Width. Эти параметры стоит проходить сверху вниз, потому что каждый следующий зависит от предыдущего.

Выбор исходного меню

Select Menu определяет, какое дерево Joomla будет показано. Если на сайте есть несколько меню - главное, футерное, скрытое, каталог, личный кабинет - выберите то, которое действительно предназначено для этой панели. Не используйте главное меню только потому, что оно уже есть. Для вертикальной навигации часто удобнее создать отдельное меню с более предметной структурой: например "Каталог", "Документация" или "Разделы услуг".

Отдельное меню уменьшает риск, что изменения в шапке сайта случайно повлияют на боковую навигацию. При этом Joomla позволяет одному меню иметь несколько модулей, так что вы можете вывести одно дерево в разных местах с разными уровнями и назначением. Но если вы используете несколько экземпляров JUX Vertical Menu на одной странице, учитывайте changelog: разработчик исправлял конфликты конфигурации и поведение Keep Canvas Open при нескольких модулях. Это не запрет, но повод тестировать такие схемы отдельно.

Start Level и End Level

Стартовый и конечный уровни отвечают за глубину вывода. Если вы показываете весь каталог, можно оставить все нужные уровни. Если модуль должен работать как локальное меню раздела, выберите старт с определённого уровня и ограничьте конец. В стандартной логике Joomla похожий подход используется для подменю: один модуль может показывать первый уровень, другой - дочерние пункты активного раздела.

Ошибка новичка - включить слишком много уровней сразу. Формально многоуровневая поддержка есть, но посетителю трудно пользоваться деревом, где каждое направление имеет 4-5 раскрывающихся вложений. Для публичной навигации обычно лучше показать 2-3 смысловых уровня, а глубинные страницы связывать внутренними ссылками, хлебными крошками или контентными блоками.

Выбор позиции: модульная колонка или off-canvas

Параметр позиции меню в JUX Vertical Menu помогает выбрать, будет ли меню связано с обычной модульной позицией или с off-canvas-режимом. Для статичной колонки обязательно проверьте реальную позицию шаблона и ширину контейнера. Для off-canvas важнее кнопка открытия, сторона выезда, перекрытие контента и поведение при прокрутке.

Если меню нужно как постоянная навигация по разделу, выбирайте модульную позицию. Если это вспомогательная навигация, которая должна освобождать место, выбирайте off-canvas. Для мобильной аудитории off-canvas почти всегда удобнее, но не делайте вывод только по ширине экрана. Иногда на десктопе боковая колонка лучше, а на мобильном - off-canvas. Если расширение и шаблон не дают автоматического разделения, можно использовать два модуля с разным назначением и CSS-классами, но такую схему надо тщательно проверить.

Multi Expand Items

Multi Expand Items отвечает за то, закрывается ли открытая ветка при клике на другую ветку. Если включить несколько раскрытых веток, посетитель может сравнивать соседние разделы и видеть больше структуры. Это удобно для документации, справочника и каталога с похожими категориями. Если выключить, меню остаётся компактнее: открытие новой ветки закрывает предыдущую.

Выбор зависит от длины меню. Для короткого меню с 2-3 ветками можно разрешить несколько раскрытий. Для длинного каталога лучше держать одну активную ветку, иначе панель быстро превратится в длинный список. После изменения обязательно проверьте, не уводит ли раскрытое меню кнопку или важные пункты ниже первого экрана.

Menu Max Width

Menu Max Width задаёт максимальную ширину панели. В документации приведены примеры вроде 300px или 100%. Для боковой колонки разумно начинать с ширины, которую допускает шаблон: часто это диапазон около 260-340 пикселей, но точное значение зависит от дизайна. Для off-canvas можно дать больше пространства, если пункты длинные, но не стоит закрывать почти весь экран на планшете без необходимости.

Проверка результата: после изменения ширины откройте длинные пункты меню, активное состояние, второй уровень и мобильный вид. Если текст переносится на 3-4 строки, лучше сократить названия пунктов или увеличить ширину панели, чем уменьшать шрифт до нечитаемого размера.

Статичный режим и off-canvas: как выбрать поведение

В карточке продукта и документации JUX Vertical Menu отдельно выделены Static Position и Offcanvas Position. Это не просто визуальные варианты. Они решают разные задачи взаимодействия. Статичный режим поддерживает постоянный контекст: пользователь видит, где он находится, какие разделы рядом и куда можно перейти дальше. Off-canvas поддерживает экономию пространства: меню не мешает чтению, но доступно по открытию.

Когда выбирать статичный режим

Статичный режим стоит выбрать, если меню является частью содержания раздела. Например, в документации слева видна структура глав, в интернет-магазине - категории, в корпоративном разделе - список услуг. Посетитель может читать страницу и сразу понимать, какие соседние материалы есть рядом. При этом статичный режим сильнее зависит от шаблона: нужна подходящая позиция, нормальная ширина колонки и аккуратное поведение на мобильных экранах.

Проверяйте не только главную страницу раздела. Откройте внутреннюю статью, страницу категории, результат поиска, карточку товара или компонентную страницу, если меню должно быть доступно там. В Joomla модули часто назначаются по пунктам меню, поэтому страница без явного пункта может вести себя иначе, чем ожидается.

Когда выбирать off-canvas

Off-canvas подходит для длинного меню, которое нужно держать в доступе, но не показывать постоянно. Это полезно на мобильных устройствах, в промо-страницах, в интерфейсах с широкой центральной областью и в случаях, когда шаблон не имеет удобной боковой позиции. Официальные источники описывают off-canvas как скрытую панель, которая выезжает при вызове и помогает сохранить чистый вид страницы.

У off-canvas есть свои риски. Пользователь должен заметить кнопку открытия. Панель не должна перекрывать важные системные элементы. При закрытии должно быть понятно, куда вернулся фокус. Если в шаблоне уже есть мобильное меню, проверьте, не появляются ли две похожие кнопки. В таких случаях лучше оставить один главный мобильный механизм, а JUX Vertical Menu использовать как локальную навигацию внутри разделов.

Как тестировать оба режима без путаницы

Создайте один тестовый модуль и сначала настройте его как статичный. Проверьте дерево, уровни, активные пункты, ширину и назначение на страницы. Затем клонируйте модуль или создайте второй экземпляр для off-canvas, но назначьте его только на тестовую страницу. Так вы сравните поведение без риска, что пользователи увидят два меню сразу.

Если нужно оставить оба режима на одном сайте, разделите их назначением. Например, статичная колонка работает в разделе "Документация", а off-canvas - в разделе "Каталог". Не выводите два экземпляра одного и того же меню на одной странице без явной причины. Даже если changelog содержит исправления конфликтов для нескольких модулей, лишнее дублирование усложняет диагностику и может ухудшить удобство.

Стили верхнего меню, подменю и пунктов: что менять первым

Документация JoomlaUX выделяет отдельные вкладки для верхнего меню, подменю и пунктов меню. Это удобно, но именно здесь легко потерять цель. Стилизация должна решать читаемость, различимость уровней и соответствие шаблону. Если менять всё сразу, меню быстро становится ярким, но неудобным: активный пункт плохо виден, подменю сливается с родителем, hover-состояния конфликтуют с цветами шаблона.

Сначала читаемость, потом оформление

Начните с базовой темы меню и проверьте контраст. Текст должен нормально читаться на фоне, активный пункт должен отличаться от обычного, а дочерний уровень должен быть визуально связан с родителем. Если в меню есть иконки или изображения, они не должны заменять текст в критичных пунктах. Изображение помогает быстрее узнать раздел, но навигация должна оставаться понятной и без него.

Для боковой панели особенно важны отступы. Слишком маленькие отступы делают меню плотным и тревожным, слишком большие - увеличивают высоту и прячут нижние пункты. Смотрите на реальную структуру, а не на демо с короткими словами. Если у вас длинные русские названия, тестируйте именно их.

Настройки подменю

Подменю должно объяснять вложенность. Используйте отступ, меньший размер или спокойный фон, но не делайте второй уровень визуально важнее первого. Если у дерева много уровней, полезно оставить 2-3 явных уровня, а глубину переносить в контент. В многоуровневой навигации главное - не показать всё, а помочь пользователю не потеряться.

Безопасная CSS-доработка через класс модуля

Joomla позволяет задавать классы модулей и применять стили через файл шаблона, например через пользовательский CSS. Это безопаснее, чем править файлы расширения. Если нужно слегка отделить вертикальное меню от контента, добавьте модулю собственный класс и примените небольшую правку в CSS шаблона.

.jux-side-nav {
  border-left: 3px solid #f28c28;
  padding-left: 14px;
}

.jux-side-nav .active > a {
  font-weight: 700;
}

Класс jux-side-nav здесь условный: его нужно добавить в настройках модуля как собственный класс, если ваш шаблон поддерживает такой вывод. После правки проверьте активный пункт, второй уровень и мобильный вид. Если эффект не понравился, удалите класс из модуля или уберите CSS из пользовательского файла. Не редактируйте файлы JUX Vertical Menu и ядро Joomla, иначе обновление может стереть изменения.

Параметры пунктов меню, изображения и модули внутри подменю

Одна из продуктовых особенностей JUX Vertical Menu - расширенные параметры для отдельных пунктов меню. Документация указывает, что после установки у пунктов появляется пакет параметров Parameters (JUX Vertical Menu Extended). Также описан способ добавить изображение через вкладку Link Type и использовать параметр link image, а для загрузки модуля в пункт меню - выбрать модуль в параметрах подменю.

Изображения в пунктах меню

Изображение рядом с пунктом меню полезно, когда оно ускоряет узнавание раздела. Например, в каталоге можно использовать маленькие иконки категорий, в базе знаний - пиктограммы типов материалов, в корпоративном меню - символы направлений услуг. Но изображение не должно быть единственным носителем смысла. Посетитель должен понимать пункт по тексту, а изображение лишь поддерживает его.

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

Модули внутри подменю

Документация показывает возможность выбрать модуль для содержимого подменю. Это открывает полезные сценарии: добавить краткий блок помощи, мини-баннер раздела, форму поиска по каталогу, список популярных материалов или контактный блок для раздела услуг. Но здесь важно не превращать меню в полноценную страницу.

Модуль внутри подменю должен отвечать на короткий вопрос: "Что поможет выбрать следующий шаг?" Если в подменю появляется длинный текст, форма из нескольких полей или тяжёлый виджет, это ухудшит скорость и доступность. Для мобильного off-canvas особенно важно держать дополнительные блоки короткими.

Пример хорошего модульного содержимого

• Короткий блок "Нужна помощь с выбором?" со ссылкой на страницу консультации.
• Мини-список популярных разделов внутри категории.
• Лаконичный поиск по документации, если он уже корректно работает на сайте.
• Информационный баннер с одной ссылкой, если он не мешает основным пунктам меню.

Чего не стоит помещать в подменю

Не вставляйте в подменю сложные формы, сторонние виджеты с тяжёлыми скриптами, большие галереи, видео или блоки, которые требуют много вертикального места. Меню должно помогать навигации, а не конкурировать с контентом страницы. Если блок важный и объёмный, лучше поставить его в отдельную позицию шаблона или на целевую страницу.

Практический пример: боковое меню для раздела каталога

Представим Joomla-сайт с разделом каталога услуг. В верхней шапке уже есть главное меню, но внутри каталога нужно показать направления: "Разработка", "Поддержка", "Интеграции", "Аудит", "Обучение", а у каждого направления есть дочерние страницы. Задача - вывести аккуратную вертикальную навигацию слева на страницах каталога, сохранить видимость текущего раздела и не показывать этот блок на обычных новостях.

Цель

Получить левую колонку с вертикальным меню только в разделе каталога. Меню должно показывать первый и второй уровни, текущий раздел должен быть заметен, а дочерние пункты должны раскрываться без перегрузки страницы. На мобильной ширине меню можно заменить off-canvas-вариантом или оставить вверху раздела, если шаблон корректно перестраивает колонку.

Подготовка

Сначала создайте или проверьте отдельное меню "Каталог". Добавьте пункты первого уровня по направлениям и дочерние страницы под каждым направлением. Если какие-то страницы должны существовать для маршрутизации, но не должны показываться в навигации, не включайте их в это меню или используйте настройки отображения осознанно. Затем проверьте, что у страниц каталога есть понятные пункты меню, потому что именно через них будет работать назначение модуля на страницы.

Шаги настройки

1. Установите JUX Vertical Menu и откройте созданный site-модуль.
2. В поле Select Menu выберите меню "Каталог".
3. Задайте Start level с первого уровня и ограничьте End Level вторым или третьим уровнем, если структура не слишком длинная.
4. Выберите статичный вывод через модульную позицию, например левую колонку шаблона.
5. Настройте Menu Max Width так, чтобы длинные русские названия переносились максимум на две строки.
6. Решите, нужен ли Multi Expand Items. Для каталога услуг часто удобнее одна раскрытая ветка.
7. На вкладке назначения меню выберите только страницы каталога и дочерние страницы, где модуль должен быть виден.
8. Сохраните модуль, откройте публичную часть и проверьте несколько разных направлений.

Проверка результата

Откройте главную страницу каталога: меню должно быть в левой позиции, показывать направления и не закрывать основной контент. Затем перейдите в дочернюю услугу: активный родитель и текущий пункт должны быть понятны. Откройте страницу новости или контактов: меню не должно появляться, если оно предназначено только для каталога. После этого уменьшите ширину браузера и проверьте, как шаблон перестраивает колонку.

Нюанс, который часто пропускают

Если модуль исчезает на дочерней странице, проблема часто не в JUX Vertical Menu, а в назначении модуля или отсутствии связанного пункта меню. Joomla показывает модули по правилам Menu Assignment и Access, поэтому страница, открытая через компонент без явного пункта меню, может не совпасть с выбранным назначением. В таком случае проверьте, есть ли у страницы пункт меню, правильно ли выбраны дочерние пункты в назначении и не ограничен ли доступ.

Проверка результата: навигация, мобильный вид, скорость и доступность

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

Проверка публичной части

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

Мобильный вид

Проверьте ширины телефона и планшета. Для статичной колонки важно, куда она переезжает: над контентом, под контентом или остаётся сбоку. Для off-canvas проверьте кнопку открытия, закрытие, прокрутку длинного меню и повторное открытие после перехода. Если в шаблоне уже есть своё мобильное меню, убедитесь, что пользователь не получает две одинаковые кнопки.

Скорость и кеш

Меню само по себе обычно не является самым тяжёлым элементом страницы, но дополнительные изображения, модули в подменю и анимации могут повлиять на восприятие скорости. В Joomla у модулей есть настройки кеширования, а общий кеш можно очищать через системный раздел. После изменения структуры меню, CSS или параметров модуля очистите кеш и проверьте страницу заново. Если ошибка исчезает после очистки кеша, фиксируйте это как часть процесса обновления меню.

Доступность и клавиатура

Официальные источники по JUX Vertical Menu подтверждают кроссбраузерность и адаптивность, но не дают детального заявления о клавиатурной доступности уровня WCAG. Поэтому проверяйте самостоятельно: можно ли открыть нужные пункты клавиатурой, не теряется ли фокус в off-canvas, закрывается ли панель понятным способом, достаточно ли контраста у активного пункта. Если сайт обслуживает широкую аудиторию, эта проверка не факультативна.

Мини-итог: готовым меню можно считать не то, которое "красиво стоит в колонке", а то, которое показывает правильные пункты, работает на нужных страницах, понятно раскрывается, не конфликтует с шаблоном и остаётся читаемым на мобильных экранах.

Частые проблемы и диагностика

Большинство проблем с вертикальным меню связано с общей системой Joomla: модуль не опубликован, выбран не тот пункт назначения, позиция шаблона не выводится, скрыты дочерние уровни, включён кеш или другое меню перекрывает off-canvas. Ниже - практическая диагностика по симптомам.

Модуль не отображается на странице

Симптом: JUX Vertical Menu установлен и сохранён, но в публичной части меню не видно. Возможная причина - модуль не опубликован, выбрана позиция, которой нет в шаблоне на этой странице, или вкладка назначения меню исключает текущий пункт.

Проверьте статус публикации, позицию шаблона, выбранное меню и правила Menu Assignment. Для быстрой проверки временно назначьте модуль на все страницы и выберите заведомо существующую позицию. Если меню появилось, возвращайте точное назначение постепенно. Если не появилось, смотрите установку расширения, права доступа и наличие позиции в шаблоне.

Показываются не те пункты или нет дочерних уровней

Симптом: меню видно, но список отличается от ожидаемого. Чаще всего выбран не тот источник в Select Menu, неправильно выставлены Start level и End Level, дочерние пункты привязаны к другому родителю или скрыты настройками доступа.

Откройте исходное меню в Joomla и сравните дерево с публичным результатом. Если нужно показать только дочерние пункты активного раздела, настройте уровни осознанно. Если требуется весь каталог, не ограничивайте End Level слишком рано. После изменений очистите кеш и проверьте страницу без входа в админ-панель.

Off-canvas открывается, но перекрывает не то место или конфликтует с шаблоном

Симптом: панель выезжает, но закрывает важные элементы, не закрывается ожидаемо, появляется вместе с мобильным меню шаблона или ведёт себя по-разному на страницах. Причина может быть в конфликте с уже существующим off-canvas шаблона, z-index слоями, кнопкой открытия или несколькими похожими модулями.

Сначала выключите лишние экземпляры меню на тестовой странице. Проверьте один модуль в одном режиме. Если шаблон имеет собственное off-canvas-меню, решите, какой механизм будет главным. Не оставляйте две одинаковые кнопки открытия. Если проблема связана со слоями, используйте настройки шаблона или аккуратный CSS через пользовательский файл, но не правьте ядро расширения.

Настройки не меняются после сохранения

Симптом: вы изменили цвет, ширину или уровни, но сайт показывает старый вариант. Возможная причина - кеш Joomla, кеш шаблона, кеш браузера или внешняя оптимизация CSS/JS. Очистите кеш Joomla, обновите страницу без кеша браузера и проверьте, не включена ли оптимизация ассетов в шаблоне или стороннем расширении.

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

Меню выглядит хорошо на десктопе, но неудобно на мобильном

Симптом: пункты слишком длинные, панель занимает весь экран, подменю трудно прокручивать или кнопка открытия неочевидна. Проверьте ширину, уровни и необходимость показывать все ветки. Для мобильного режима часто лучше ограничить глубину, упростить названия и убрать дополнительные модули внутри подменю.

Если статичная колонка на мобильном становится слишком длинной, рассмотрите off-canvas или отдельный мобильный экземпляр с более коротким деревом. Но не дублируйте меню без контроля назначения: два экземпляра на одной странице создают путаницу и могут повторить исправленные разработчиком конфликты нескольких модулей.

После обновления Joomla или шаблона изменился внешний вид

Симптом: меню работало, но после обновления поменялись отступы, цвета, ширина или поведение. Возможная причина - новые стили шаблона, изменённый порядок CSS, обновление JavaScript или несовпадение пользовательских правок.

Сравните страницу до и после на тестовой копии. Проверьте, не редактировались ли файлы расширения напрямую. Если использовался пользовательский CSS через класс модуля, временно отключите его и посмотрите базовый вид. Если проблема в конфликте шаблона, решайте её на уровне пользовательского CSS или настроек шаблона, а не через изменение файлов JUX Vertical Menu.

Безопасные улучшения без правки файлов расширения

Навигационный модуль часто хочется "немного допилить": добавить отступ, выделить активный пункт, скрыть лишний блок на мобильном, изменить фон. Делать это можно, но только через безопасные слои Joomla: настройки модуля, пользовательский CSS шаблона, классы модуля и стандартные возможности назначения на страницы. Не редактируйте файлы расширения и не вставляйте произвольный JavaScript, если задача решается настройкой.

Класс модуля для отдельной зоны

Если меню используется только в каталоге, дайте модулю уникальный класс, например catalog-vertical-nav. Тогда стили будут касаться только этой зоны. Это особенно полезно, если на сайте есть несколько экземпляров JUX Vertical Menu: для каталога, документации и личного кабинета можно настроить разные отступы без вмешательства в общую тему.

Ограничение визуального шума

Не добавляйте изображения, цветные иконки и модули в каждый пункт. Лучше выделить 3-5 ключевых разделов, а остальные оставить спокойными. Меню должно быть предсказуемым. Если посетитель вынужден рассматривать каждую строку как баннер, навигационная скорость падает.

Проверка после улучшений

После любой доработки пройдите пять точек: главная страница раздела, дочерняя страница, страница вне раздела, мобильный вид, страница для пользователя без входа. Если всё работает, изменение безопасно. Если нет, откатите последний CSS или настройку. Лучшее улучшение навигации - то, которое можно быстро объяснить, проверить и отменить.

Когда JUX Vertical Menu будет удачным выбором

JUX Vertical Menu стоит использовать, если на сайте есть реальная навигационная задача: показать много пунктов в боковой колонке, организовать раздел с дочерними страницами, сделать аккуратную off-canvas-панель или добавить изображения и модульное содержимое в отдельные пункты. Расширение особенно полезно там, где обычная верхняя строка меню уже не справляется с глубиной структуры.

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

Если вам нужен компактный способ вывести многоуровневую навигацию Joomla и вы готовы проверить результат на тестовой копии, можно перейти к скачиванию JUX Vertical Menu и пройти настройку по шагам из этого руководства. Финальное решение принимайте после проверки на своём шаблоне: именно шаблон, позиции и структура меню определяют, насколько удобно расширение будет работать на конкретном сайте.