Тестовая страница меню
Современное адаптивное меню с мега-меню для десктопа и выдвижной панелью для мобильных устройств. Соответствует стандартам UX/UI 2025 года.
Адаптивный дизайн
Автоматическая адаптация под любой размер экрана. Мега-меню на десктопе, выдвижная панель на мобильных.
Плавные анимации
Микроанимации и переходы для улучшения восприятия. Отзывчивый интерфейс с визуальной обратной связью.
Доступность (a11y)
Полная поддержка клавиатурной навигации, ARIA-атрибуты, семантическая разметка для скринридеров.
Мега-меню
Расширенное меню каталога с категориями, акциями и специальными предложениями в удобном двухколоночном формате.
Touch-friendly
Увеличенные области касания, жесты свайпа для закрытия, оптимизация для сенсорных экранов.
Встроенный поиск
Быстрый доступ к поиску товаров прямо из меню. Адаптивное поле поиска в мобильной и десктопной версиях.
Как тестировать
1 Десктоп (ширина > 1024px)
- Наведите на «Каталог» — появится мега-меню
- Клик по категориям переводит на соответствующую страницу
- Нажмите Escape для закрытия мега-меню
- Проверьте hover-эффекты на всех ссылках
2 Мобильные (ширина < 1024px)
- Нажмите «гамбургер» — откроется боковая панель
- Разверните «Каталог» — появятся подкатегории
- Клик вне панели или «×» закрывает меню
- Проверьте прокрутку при большом количестве пунктов
Техническая информация
Используемые технологии:
- • Vue 3 Composition API
- • Tailwind CSS
- • Vue Transitions
- • Teleport для модальных окон
Файлы компонента:
components/MainMenu.vuepages/menu-test.vue