Техническое задание: Анимированное графическое меню для WordPress

Цель проекта

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

Основные требования

1. Структура и содержимое

Меню должно состоять из 7 графических элементов (иконок).
Каждый элемент должен быть представлен в виде картинки (изображение предоставлено заказчиком).
Под каждым элементом или при наведении должна появляться короткая текстовая подпись (название категории товара/услуги).
На начальном этапе все элементы должны вести на заглушку (#). В дальнейшем ссылки будут заменены на актуальные.

2. Визуальные эффекты и интерактивность

Реализовать эффект hover (наведение).
При наведении курсора на элемент меню должна происходить плавная смена изображения на версию другого цвета (например, с монохромной на цветную).
Анимация смены должна быть плавной, без резких скачков.
Текстовая подпись должна появляться при наведении (например, всплывающей подсказкой или плавным появлением под иконкой).

3. Техническая интеграция

Решение должно быть реализовано стандартными средствами темы WordPress Twenty Twenty-Five.
Код (HTML, CSS) должен быть вставлен в шаблон через настройки темы (например, через виджет «Пользовательский HTML» или редактирование шаблона шапки) без использования сторонних плагинов или «костылей».
Меню должно быть встроено в область шапки сайта (header).

4. Адаптивность

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

Результат работы

Готовый, протестированный блок HTML/CSS кода, который можно скопировать и вставить в указанное место в админ-панели WordPress. Код должен быть чистым, комментированным (при необходимости) и полностью рабочим в рамках заявленной темы.

код