Разработка

КЕЙС: Разработка динамического мегаменю для прокатной компании Premier cars

Реализовано масштабируемое, адаптивное и SEO-ориентированное мегаменю, которое стало не просто элементом навигации, а полноценной частью структуры сайта параметры.

Время работы

2 недели

ГОД

2024

Задача доработки

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

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

Цель доработки

Целью стало внедрение полностью динамического мегаменю, которое автоматически формируется на основе данных WordPress и обновляется при добавлении новых категорий, марок и автомобилей. Инициатива доработки исходила от SEO-отдела: такое решение фиксирует корректную структуру сайта, усиливает внутреннюю перелинковку и обеспечивает стабильные точки входа в ключевые разделы автопарка. Благодаря этому новые страницы быстрее попадают в навигацию и получают понятный путь в 1-2 клика из хедера, что улучшает индексирование, распределение ссылочного веса и поведенческие метрики, а заодно снимает ручную поддержку меню как класс (любимая задача любого проекта, да).

Общая концепция мегаменю

Мегаменю открывается по наведению на пункт основного меню «Автопарк» и занимает расширенную область экрана. Визуально и логически меню разделено на три части. Каждая часть показывается только при клике на активный таб. Такое разделение позволило сделать меню понятным даже при большом объеме данных и сохранить удобство использования на десктопах и мобильных устройствах. Все элементы в меню кликабельны и ведут на отдельные страницы с заранее подготовленными SEO-структурами.

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

Категории автомобилей

(01)

Раздел категорий автомобилей — это не просто список ссылок. Он построен на основе таксономии WordPress, где каждая категория автомобиля существует как полноценная сущность со своим урлом, названием и SEO-страницей.

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

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

При клике на категорию пользователь попадает на отдельную SEO-страницу, где отображаются только автомобили выбранного типа — например, только электрокары или только спорткары. Эти страницы индексируются поисковыми системами и работают как посадочные для органического трафика.

Марки автомобилей

(01)

Раздел марок автомобилей построен по аналогичному принципу, но с дополнительной логикой сортировки и структуры.

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

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

При клике на марку пользователь попадает на отдельную страницу бренда, где отображаются все автомобили этой марки — например, только BMW или только Mercedes-Benz. Эти страницы были специально проработаны под SEO и используются как полноценные категории автопарка.

Модели автомобилей

(01)

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

Модели выводятся динамически и строго в связке с маркой. Например, в колонке BMW пользователь видит только X5, X6, X7, M-серию и другие реальные модели, которые есть в автопарке. Клик по модели ведет на отдельную страницу, где отображаются только автомобили конкретной модели, например исключительно BMW X5.

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

Полная динамика и масштабируемость

Ключевая особенность мегаменю — полная динамика. Меню не содержит статических элементов. Оно формируется на основе данных в админ панели и реального наполнения автопарка.

Если на сайте появляется:

новая категория автомобилей — она автоматически появляется в мегаменю;
новая марка — она сразу отображается в разделе марок;
новая модель — она появляется в списке моделей соответствующего бренда.

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

Адаптивность и пользовательский опыт

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

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

Результат

В итоге было реализовано масштабируемое, адаптивное и SEO-ориентированное мегаменю, которое стало не просто элементом навигации, а полноценной частью структуры сайта: