Za Canvas Menu — адаптивное меню в Joomla

Za Canvas Menu — это модуль для отображения адаптивного меню в CMS Joomla, которое поддерживает вложенные списки.

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

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

Когда посетитель открывает ваш сайт на телефоне и не может найти навигацию — вы потеряли клиента. Боковые canvas-меню не модный тренд, а практическое решение для сайтов со сложной структурой. Za Canvas Menu приносит в Joomla настоящую боковую навигацию с многоуровневым вложением, анимационными эффектами и полной адаптивностью под любое устройство. Сегодня мы разберём этот модуль до винтика, протестируем каждую функцию и сравним с конкурентами.

Модуль появился в то время, когда Joomla 3.x была доминирующей версией, а большинство шаблонов не умели нормально обрабатывать мобильные меню. Za Canvas Menu закрыл эту брешь — он выдвигает боковую панель слева или справа, показывает меню Joomla с неограниченной вложенностью и поддерживает категории VirtueMart с миниатюрами. Для интернет-магазинов это, считай, убивает двух зайцев одним выстрелом.

Что такое Za Canvas Menu

Za Canvas Menu — это модуль для отображения адаптивного бокового меню в Joomla 2.5 и 3.x. В отличие от традиционных выпадающих меню, которые падают сверху, этот модуль выдвигает панель сбоку экрана — отсюда и слово «Canvas» в названии, отсылающее к холсту, который появляется из-за края. Панель содержит полную иерархию меню со всеми вложенными уровнями, видимыми и раскрывающимися внутри этой же панели.

Ключевое отличие от других модулей меню Joomla — способ подачи. Обычные меню занимают место в макете шаблона. Za Canvas Menu прячется за кнопкой-триггером и появляется только когда нужно. Это освобождает драгоценное место на экране, особенно на мобильных устройствах, где каждый пиксель на счету. Меню поддерживает левое и правое позиционирование панели, четыре стиля анимации появления и интеграцию с Google Fonts — более 650 семейств шрифтов для оформления пунктов.

Модуль работает со всеми современными браузерами: Chrome, Firefox, Safari, Edge и даже Opera. Мобильная поддержка охватывает планшеты и смартфоны — canvas-панель адаптируется под ширину экрана и обеспечивает комфортное сенсорное взаимодействие. Если вы используете VirtueMart 3 для интернет-магазина, модуль умеет подтягивать названия категорий и их изображения прямо в структуру меню, превращая навигацию в визуальный каталог.

Таблица возможностей

Установка

Установка Za Canvas Menu проходит по стандартному сценарию расширений Joomla. Скачайте ZIP-архив модуля, откройте админ-панель Joomla, перейдите в Расширения Расширения → Менеджер расширений Менеджер → Установка Установка. Либо перетащите ZIP-файл в область загрузки, либо используйте кнопку обзора для выбора файла вручную.

После установки Joomla покажет сообщение об успехе. Модуль появится в списке Менеджера модулей. Теперь начинается самое интересное — настройка.

Настройка: пошаговое руководство

Откройте установленный модуль из Менеджера модулей. Настройки логически сгруппированы по секциям. Пройдёмся по каждой.

1. Базовые настройки модуля

Первым делом выберите, какое меню Joomla отображать. В выпадающем списке доступны все существующие меню — главное, футерное, пользовательское. Задайте заголовок модуля (или скройте его для чистого вида). Выберите позицию шаблона — она определяет, где на странице появится кнопка-триггер.

Установите статус модуля «Опубликовано» и настройте привязку к пунктам меню — на каких страницах модуль должен отображаться. Можно показать везде, только на выбранных или везде кроме указанных. Последний вариант полезен, когда нужно скрыть canvas-меню на лендингах, где оно отвлекает от целевого действия, а на остальных страницах оставить.

2. Позиция панели и поведение

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

Настройте ширину панели — слишком узкая, и пункты меню будут тесниться; слишком широкая — съест область контента. Хорошая стартовая точка: 280-320 пикселей для мобильных и 300-400 для десктопов. Тестируйте на реальных устройствах, потому что то, что хорошо выглядит в превью админки, часто ведёт себя иначе на настоящем телефоне.

3. Стили анимации

Za Canvas Menu предлагает четыре варианта анимации появления панели: slide (скольжение), fade (затухание), push (выталкивание контента) и overlay (наложение поверх). Slide — самый распространённый, панель выезжает с выбранной стороны. Fade даёт плавный переход непрозрачности. Push сдвигает основной контент, освобождая место под меню. Overlay рисует панель поверх, не затрагивая макет страницы.

Каждая анимация имеет настройку скорости в миллисекундах. По умолчанию стоит 300 мс — хороший баланс между плавностью и отзывчивостью. Значения выше 500 мс делают меню вялым, ниже 150 мс — дёрганым. Если есть возможность, протестируйте на реальных посетителях — предпочтения по анимации субъективны, и то, что нравится разработчику, может раздражать пользователей.

4. Типографика и Google Fonts

Вот где Za Canvas Menu действительно выделяется на фоне более простых модулей. Вы можете выбрать из более чем 650 семейств Google Fonts для текста пунктов меню. Шрифт загружается с CDN Google автоматически — не нужно вручную вставлять ссылки на шрифты в шаблоне.

Настройте размер шрифта в пикселях, жирность (300 для лёгкого начертания, 400 для нормального, 700 для жирного) и выравнивание текста внутри пунктов меню. Также можно настроить межбуквенное расстояние для более тонкой типографики. Частая ошибка: выбор слишком декоративного шрифта, который отлично смотрится крупно, но становится нечитаемым в навигационном меню. Держитесь чистых читаемых шрифтов: Roboto, Open Sans, Lato, Montserrat.

5. Цветовая настройка

Два основных элемента управления цветом: фон панели меню и цвет шрифта. Подбирайте контрастные сочетания — тёмный фон со светлым текстом или наоборот. Модуль не имеет поточечных или поуровневых настроек цвета, так что выбранные цвета применяются глобально ко всему меню.

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

6. Интеграция с VirtueMart

Если вы используете интернет-магазин на VirtueMart 3, Za Canvas Menu умеет подтягивать названия категорий и соответствующие изображения в структуру меню. Включите опцию VirtueMart в настройках и выберите VM-меню для отображения. Категории появляются как пункты меню с миниатюрами изображений рядом с текстом.

Такая визуальная навигация по категориям товаров значительно улучшает покупательский опыт. Посетитель, прокручивающий canvas-меню, видит категории с картинками — он мгновенно узнаёт типы товаров, не вчитываясь в текст. Это снижает когнитивную нагрузку и ускоряет просмотр. Держите изображения категорий небольшими и единообразными — 60x60 или 80x80 пикселей хорошо работают для миниатюр в пунктах меню.

Преимущества

• Joomla! 2.5, 3.x поддержка
• Взаимодействие со всеми современными браузерами
• Есть поддержка планшетов и мобильных устройств
• Выбор правой или левой панели отображения
• Выбор из меню
• Добавление меню категорий компонента VirtueMart 3 с изображениями
• Внутренние списки
• 4 стиля анимации меню
• Возможность использовать шрифты Google, более чем 650 наименований
• Безграничное количество уровней (подменю)
• Опция контроля цвета для фона меню
• Опция контроля цвета для шрифта меню
• Легкость в управлении

Сравнение с аналогами для Joomla

Za Canvas Menu занимает отдельную нишу — боковая навигация. Ни один из популярных модулей меню не предлагает настоящей canvas-панели из коробки. DJ-Menu и MaxiMenu CK доминируют в пространстве верхней навигации и мега-меню, но если вам нужен выезжающий по гамбургеру боковой блок с многоуровневым вложением — Za Canvas Menu один из немногих модулей Joomla, построенных именно под эту задачу.

ARI Ext Menu заслуживает упоминания за функции доступности и поддержку навигации с клавиатуры, но и он не предлагает canvas-панель. Для сайтов, где паттерн боковой панели имеет смысл — порталы документации, базы знаний, mobile-first дизайн — Za Canvas Menu даёт функциональность, которой у альтернатив просто нет.

Оптимизация производительности

Любой дополнительный модуль на сайте Joomla добавляет к общему весу страницы. Za Canvas Menu загружает собственные CSS и JavaScript файлы, плюс любые файлы Google Fonts, которые вы выбрали. Вот реалистичный профиль производительности на основе типичной конфигурации.

Ядро модуля — CSS и JS — добавляет примерно 15-25 КБ без сжатия. С Gzip-сжатием, включённым на сервере, это падает до 5-10 КБ на проводе. Реальная переменная — Google Fonts: одно семейство шрифтов с двумя начертаниями добавляет около 40-80 КБ. Выберите шрифт с несколькими жирностями — и накладные расходы растут пропорционально. В сумме с шаблоном, другими модулями и изображениями общее влияние обычно приемлемо — но измеряйте, а не предполагайте.

Содержимое меню рендерится сервером — никаких клиентских API-запросов или обращений к базе данных во время загрузки страницы. Это значит, что структура меню включена в вывод страницы при рендеринге Joomla, а не подгружается асинхронно. Плюс: нет сдвига макета во время загрузки. Минус: HTML для всех уровней меню отправляется всегда, даже если посетитель никогда не откроет canvas-панель.

SEO-влияние боковых меню

Боковые меню и canvas-панели влияют на SEO иначе, чем традиционная верхняя навигация. Ключевое различие: содержимое canvas-меню обычно скрыто по умолчанию и открывается взаимодействием пользователя. Поисковые системы могут как индексировать, так и не индексировать контент, скрытый за JavaScript-триггерами — зависит от того, как модуль реализует поведение показа/скрытия.

Za Canvas Menu рендерит все пункты меню в HTML, даже когда панель скрыта — он использует CSS для управления видимостью, а не JavaScript для внедрения контента. Это означает, что поисковые системы видят и могут индексировать полную структуру меню при сканировании. Ссылки внутри меню передают вес ссылок и сигнализируют иерархию страниц поисковикам — это плюс для SEO.

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

Для доступности проверьте, что меню имеет правильные ARIA-атрибуты и по нему можно перемещаться с клавиатуры. Скринридеры должны правильно объявлять меню и его пункты. Генерируемый модулем HTML определяет это — тестируйте инструментами вроде WAVE или axe DevTools для проверки соответствия. Хорошая доступность — это хорошее SEO: Google поощряет сайты, которые эффективно обслуживают всех пользователей.

Реальные сценарии использования

Интернет-магазин с большим каталогом

Магазин электроники с 200+ категориями товаров использует Za Canvas Menu для отображения полного дерева категорий в боковой панели. Кнопка-триггер находится в шапке рядом с логотипом. На мобильных canvas-панель обеспечивает единственную полноценную навигацию — горизонтальное меню свёрнуто до трёх основных ссылок. Интеграция с VirtueMart подтягивает изображения категорий, делая просмотр визуальным, а не текстовым.

Портал документации

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

Блог с глубокими архивами

Фотоблог с пятилетним контентом использует canvas-меню для навигации по категориям и архивам. Иерархия Год → Месяц → Категория → Заголовок поста работает естественно в боковой панели. Canvas не конкурирует с контентом — он остаётся скрытым, пока посетитель не захочет просмотреть записи по категориям.

\u{201c}

Za Canvas Menu спас меня на проекте, где заказчик настаивал на боковом браузере категорий для своего книжного интернет-магазина. DJ-Menu не умел, MaxiMenu был избыточен. Za Canvas настроил за 20 минут, работает без проблем два года.

\u{201c}

Интеграция с VirtueMart — вот что меня подкупило. Покупатели видят категории мебели с реальными фотографиями в боковом меню — кликают быстрее и покупают больше. Мелочь, а прирост конверсии ощутимый.

Решение типичных проблем

Меню не отображается на сайте

Проверьте статус модуля — должен быть «Опубликован». Проверьте правильность позиции шаблона и привязку к пунктам меню. Частая ошибка: выбор позиции, которой нет в шаблоне. Используйте Расширения → Шаблоны → Предпросмотр позиций модулей чтобы увидеть все доступные позиции вашего шаблона.

Canvas-панель перекрывает контент некорректно

Возможно, нужна корректировка z-index модуля, если в шаблоне есть элементы с высоким z-index — например, залипающая шапка. Добавьте в свой CSS: .za-canvas-panel { z-index: 9999; } Тестируйте на всех разрешениях — z-index, работающий на десктопе, может сломаться на мобильных, если шаблон меняет наложение элементов при разных размерах экрана.

Шрифты Google не загружаются

Если выбранный шрифт не отображается, проверьте ошибки JavaScript в консоли браузера. Некоторые блокировщики рекламы и расширения приватности блокируют запросы к Google Fonts. Тестируйте в режиме инкогнито, чтобы исключить влияние расширений. Также убедитесь, что ваш сервер разрешает исходящие HTTP-соединения — некоторые shared-хостинги блокируют их по умолчанию.

Подменю не раскрываются

Убедитесь, что родительский пункт меню имеет тип «Заголовок меню» или «Разделитель» в менеджере меню Joomla. Пункты типа «Материал» или «Блог категории» не раскрывают подменю — они являются конечными ссылками. Также проверьте конфликты JavaScript, временно отключая другие модули по одному.

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

Почти всегда это вызвано загрузкой Google Fonts до начала анимации. Переключитесь на системный стек шрифтов для мобильных устройств через CSS media queries или уменьшите количество начертаний шрифта. Модуль загружает шрифты синхронно по умолчанию — параметр font-display: swap не выставляется в настройках, так что возможно придётся добавить его через пользовательский CSS.

FAQ

Горячие клавиши и рекомендации по ускорению настройки

Быстрое переключение стороны панели

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

Тестирование анимаций на реальном устройстве

Никакой эмулятор браузера не передаст ощущение от анимации canvas-меню на реальном телефоне. Проверьте, как ведёт себя push-анимация: не дёргается ли контент, не выходят ли элементы за пределы экрана. Самый безопасный выбор — slide с 300 мс: работает предсказуемо почти везде.

Групповое редактирование цветов через HEX

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

Резервное копирование настроек модуля

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