WMT Dock Menu Gallery - галерея изображений в виде панели

Что такое WMT Dock Menu Gallery и зачем он нужен

Если вы хоть раз пользовались Mac, вы знаете, что такое dock — та самая панель с иконками внизу экрана, которая анимируется при наведении курсора. Иконки увеличиваются, подпрыгивают и реагируют на положение курсора с плавностью, которая делает взаимодействие физическим, а не механическим. WMT Dock Menu Gallery переносит эту модель взаимодействия в Joomla. Не приблизительно. Не через CSS-имитацию, которая разваливается на мобильных устройствах. Настоящий dock: анимация отскока, плавное масштабирование иконок, всплывающие подсказки — навигация, которая заставляет сайт ощущаться как нативное приложение, а не веб-страница.

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

+

\u{201c}

Метафора dock работает потому, что она знакома. Сотни миллионов пользователей Mac и iPad уже знают, как с ней взаимодействовать. Вы не учите никого новому интерфейсу — вы заимствуете мышечную память, которая уже существует.

Но модуль умеет больше, чем просто показывать пункты меню. Он работает как галерея портфолио. Вместо ссылок на страницы вы можете наполнить панель изображениями — фотографиями, образцами дизайна, снимками товаров — и каждая иконка будет открывать увеличенный предпросмотр. Именно здесь часть «Gallery» в названии оправдывает себя. Это не просто меню — это визуальная витрина, упакованная в навигационную панель. Один экземпляр модуля может одновременно служить основной навигацией, каруселью избранных товаров и лайтбокс-галереей — в зависимости от того, как вы настроите цель ссылки каждого пункта меню.

Визуальная универсальность простирается дальше. Вы можете установить сплошной цветной фон, полностью прозрачный — когда иконки словно парят над контентом страницы, или полупрозрачный с эффектом матового стекла, который добавляет глубину, не заслоняя содержимое за панелью. Движок анимации реагирует на положение курсора внутри области иконки — а не только на бинарное состояние hover — так что эффект масштабирования следует за движением мыши, создавая ту самую органическую отзывчивость, которая делает dock macOS таким приятным в использовании.

Установка и первичная настройка

Установка WMT Dock Menu Gallery следует стандартному процессу расширений Joomla, но есть несколько шагов, которые стоит проговорить явно — их пропуск приводит к самому частому вопросу в поддержку: «Почему моя панель пустая?»

1. Скачайте ZIP-архив модуля с сайта разработчика.
2. Перейдите в Расширения → Менеджер расширений → Установка в админ-панели Joomla.
3. Загрузите ZIP-файл — Joomla распакует и зарегистрирует модуль автоматически.
4. Перейдите в Расширения → Модули и нажмите Создать.
5. Выберите WMT Dock Menu Gallery из списка типов модулей.
6. Назначьте позицию модуля — debug или footer лучше всего подходят для нижней панели; позиция в боковой колонке — для вертикального режима.
7. Выберите меню для отображения на вкладке Привязка к пунктам меню.
8. Сохраните и проверьте на фронтенде.

Рекомендации по позициям модуля

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

Детальный разбор настроек

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

Настройки иконок

Модуль использует PNG-изображения в качестве иконок панели. Это не обсуждается — JPEG лишён прозрачности, GIF лишён глубины цвета. Каждый пункт меню может иметь свою иконку, назначаемую через вкладку Link Type Options в менеджере меню Joomla. Перейдите в Меню → [Ваше меню] → [Пункт меню] → Тип ссылки и установите поле Изображение ссылки. Укажите заголовок в поле Атрибут Title ссылки — он станет текстом всплывающей подсказки при наведении.

Рекомендуемые размеры иконок:

• Стандартная панель: 64x64 px — чётко на ретина-дисплеях, не слишком тяжёлые
• Крупная панель: 128x128 px — для галерей с большим количеством изображений, где детали имеют значение
• Минимум: 48x48 px — всё, что меньше, выглядит пиксельным при масштабировании при наведении

Ориентация панели

Модуль поддерживает два варианта расположения:

• Горизонтальный: иконки распределяются в один ряд, слева направо. Классический вид macOS dock. Лучше всего работает для основной навигации и позиций в футере, где ширина экрана в избытке. Горизонтальная раскладка естественно ведёт взгляд по странице в направлении чтения слева направо.
• Вертикальный: иконки собираются сверху вниз. Идеален для боковых колонок и встроенного контента, где горизонтальное пространство ограничено. Вертикальная раскладка занимает минимум места на экране и органично интегрируется с боковыми панелями блогов, колонками фильтров товаров и узкими виджет-зонами.

Переключение между ориентациями — одиночный выпадающий список в настройках модуля. Поведение анимации подстраивается автоматически — горизонтальный режим использует расчёты горизонтальных интервалов, вертикальный — вертикальных. Отдельные CSS-переопределения для каждой ориентации не нужны.

Цвет и прозрачность

Фон панели может быть сплошным цветом, задаваемым через hex-код, полностью прозрачным — когда иконки парят прямо поверх контента страницы, или полупрозрачным с RGBA-значением для эффекта матового стекла. Прозрачный вариант особенно эффектен, когда панель расположена поверх главного изображения или полноширинного баннера. Иконки словно парят над фотографией, создавая эффект глубины, который плоские CSS-меню не способны воспроизвести.

Поведение анимации

Анимация панели имеет три настраиваемых параметра. Коэффициент масштабирования при наведении определяет, насколько иконка увеличивается при подведении курсора — по умолчанию 1.5x, значения выше 2.0x выглядят комично. Масштабирование соседей заставляет соседние иконки также слегка увеличиваться, создавая эффект ряби — именно это делает панель органичной. Наконец, скорость анимации в миллисекундах контролирует быстроту перехода — менее 100ms дёргано, более 500ms вяло.

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

Joomla поставляется со стандартным модулем меню, который выводит ненумерованные списки. Он работает. Он доступен. Он также визуально идентичен любому другому сайту на Joomla в интернете. Вот как WMT Dock Menu Gallery выглядит на фоне распространённых альтернатив:

Ключевое отличие не в поддержке иконок — её предлагают несколько модулей. Отличие в модели анимации. Каждый другой модуль в таблице анимирует через CSS-переходы, срабатывающие по псевдоклассам hover. WMT Dock Menu Gallery использует JavaScript-масштабирование, которое реагирует на позицию курсора внутри области иконки, а не только на бинарные состояния hover. Это создаёт плавное, органичное ощущение, которое один CSS произвести не способен.

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

Портфолио фотографа

Фотограф устанавливает модуль внизу главной страницы. Каждая иконка — PNG-миниатюра категории галереи: свадьбы, портреты, пейзажи, мероприятия. Наведение масштабирует иконку и показывает название категории. Клик открывает лайтбокс с полной галереей. Панель заменяет и навигационное меню, и сетку миниатюр — два элемента интерфейса, свёрнутые в один элегантный компонент.

Витрина товаров

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

Справочник команды

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

Вопросы производительности

JavaScript-анимация работает на requestAnimationFrame, что означает синхронизацию с циклом отрисовки браузера. На современном оборудовании затраты производительности пренебрежимо малы — анимация использует GPU-ускоренные трансформации, которые обходят перерасчёт макета процессором. На старых мобильных устройствах панель с 15+ иконками может вызывать просадку кадров при быстром перемещении курсора, но для типичных сценариев с 5-10 иконками влияние на производительность незаметно.

Для оптимизации сжимайте PNG-иконки через TinyPNG или ImageOptim — иконка 64px должна весить менее 5 КБ. Ограничьте количество иконок до 5-10 — золотая середина между эстетикой и производительностью. Используйте спрайты, если модуль их поддерживает — один HTTP-запрос вместо одного на иконку. Если панель находится ниже первого экрана, отложите инициализацию JavaScript, чтобы она не блокировала первоначальную отрисовку страницы.

Частые проблемы и их решение

Иконки не отображаются

Трижды проверьте путь к изображению в Link Type Options пункта меню. Joomla по умолчанию хранит пути относительно корня сайта. Если вы ввели абсолютный путь файловой системы, браузер его не обработает. Используйте пути вида images/icons/home.png — никогда /var/www/html/images/icons/home.png. Также проверьте, что файл изображения действительно существует по указанному пути и что права доступа позволяют веб-серверу его прочитать.

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

Это проблема z-index. Панель по умолчанию использует относительно высокий z-index, чтобы парить над контентом. Если в вашем шаблоне есть элементы с z-index в тысячах — обычное дело в темах с прилипающими заголовками или модальными окнами — панель может оказаться под ними. Добавьте правило в пользовательский CSS, устанавливающее .wmt-dock-container z-index: 9999 с position: relative.

Анимация дёргается на мобильных

Отключите hover-анимацию на устройствах с сенсорным экраном. Сенсорные экраны не имеют состояний hover, так что анимация не несёт пользы и только тратит ресурсы GPU. Добавьте медиа-запрос, обнуляющий длительность анимации для устройств с pointer: coarse. Это также предотвращает случайное увеличение иконок при прокрутке страницы мимо панели.

Когда не стоит использовать WMT Dock Menu Gallery

Модуль панели не универсальная замена основной навигации, и важно понимать ситуации, когда он будет неправильным выбором. Если у вас текстоёмкие меню с длинными названиями пунктов вроде «Часто задаваемые вопросы о политике возврата и обмена товаров» — подход с одними иконками проваливается, потому что посетители не смогут понять назначение пункта без текста. Если сайт имеет многоуровневую навигацию с вложенными иерархиями меню — панель не поддерживает выпадающие списки, поэтому используйте традиционное меню для основной навигации, а dock-панель оставьте для вторичной панели быстрого доступа. Для сайтов с высокими требованиями к доступности панель опирается на визуальные иконки, и хотя подсказки помогают, скринридеры могут некорректно интерпретировать навигацию на основе иконок без дополнительных ARIA-меток. Наконец, если ваш сайт работает на старых устройствах посетителей — например, планшетах 2014-2015 годов — анимация на 10+ иконках может вызывать заметные подтормаживания интерфейса и ухудшать пользовательский опыт.

Советы по выбору иконок для максимального визуального эффекта

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

FAQ — Часто задаваемые вопросы