Изменение навигационного меню и хедера сайта Molniya

Ход работы

Задачи, поставленные перед командой разработки, были четко сформулированы и включали в себя следующие ключевые аспекты:

• Обновление навигационной системы: Необходимо было полностью переработать структуру и визуальное оформление главного меню, что позволит пользователям быстрее и эффективнее находить нужную информацию об ассортименте продукции, в частности о различных типах молний и сопутствующих товарах.
• Адаптивность и кроссплатформенность: Важно было обеспечить корректное отображение и функционирование нового меню на всех типах устройств – от широкоформатных мониторов настольных ПК до компактных экранов мобильных телефонов и планшетов. Это предусматривало разработку адаптивного дизайна, динамически подстраивающегося под размер экрана.
• Расширение функционала «Каталога»: Центральным элементом изменений должен был стать раздел «Каталог». Для него была поставлена задача реализовать многоуровневое выпадающее меню с интерактивным поведением при наведении курсора (на ПК) и нажатии (на мобильных устройствах). Это должно было обеспечить не только визуальное представление подкатегорий, но и возможность прямого перехода на страницы соответствующих категорий или подкатегорий.
• Улучшение визуального взаимодействия: Подробно были описаны требования к визуальной обратной связи: изменение цвета фона элементов меню при наведении/нажатии, отображение стрелок, указывающих на наличие подменю, и четкое разграничение между раскрытым и свернутым состоянием элементов.
• Административная гибкость: Ключевым требованием была возможность полного управления содержимым меню (добавление, удаление, редактирование пунктов) через административную панель сайта. Это обеспечивает независимость владельцев сайта от разработчиков для будущих обновлений и расширений ассортимента.

Этапы реализации

Этап 1: Анализ и Планирование

На начальном этапе был проведен тщательный анализ существующей структуры сайта molniya.com.ua и molniya.eu.com/de/, а также детально изучены предоставленное техническое описание и визуальные макеты. Команда разработки сформулировала техническое задание, разработала архитектуру нового меню и спланировала последовательность работ. Особое внимание было уделено определению оптимальных технологий для реализации адаптивного дизайна и интеграции с существующей CMS. Были обсуждены возможные варианты реализации многоступенчатых меню и выбран наиболее эффективный подход, обеспечивающий как функциональность, так и производительность.

Этап 2: Разработка интерфейса (UI) и пользовательского опыта (UX)

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

• Дизайн для ПК-версии: Разработан макет шапки сайта без бургер-меню, с интегрированными основными пунктами навигации: «КАТАЛОГ», «КАТЕГОРИИ», «О НАС», «БЛОГ», «КАЧЕСТВО», «КОНТАКТЫ», «ПЕРЕЗВОНИТЕ МНЕ», а также контактный номер телефона, иконка поиска и выбор языка. Особое внимание было уделено разработке выпадающего меню:
  • Взаимодействие при наведении: Реализовано изменение фона на оранжевый при наведении и основные категории в нем.
  • Многоуровневость: Обеспечена возможность раскрытия подменю при наведении на конкретные типы молний (например, «Специальные молнии»), а также кликабельность как основных категорий, так и их подпунктов для прямого перехода на соответствующие страницы.
  • Визуальные индикаторы: Внедрено отображение стрелок рядом с пунктами меню, которые имеют подкатегории, появляющиеся только при наличии соответствующих элементов в админке.

До:

После:

• Дизайн для мобильной версии: Для мобильных устройств был разработан упрощенный, но функциональный интерфейс, обеспечивающий удобство использования на небольших экранах. Вместо наведения, основной интеракцией стало нажатие.
  • Разворачивание/Сворачивание: При нажатии на категорию (например, «Спиральная молния») или на иконку «+» рядом с ней, разворачиваются подпункты.
  • Двухэтапный переход: Реализован функционал, при котором первое нажатие на категорию разворачивает подпункты, а второе нажатие (на ту же категорию) осуществляет переход на соответствующую страницу. Если подпунктов нет, переход происходит с первого нажатия.
  • Визуальная индикация состояния: Иконка «+» меняется на «–» при развернутом меню, указывая на возможность сворачивания.
  • Изменение цвета при активации: Цвет фона меняется при нажатии на элемент, открывающий подменю, обеспечивая визуальную обратную связь.

До:

После:

Этап 3: Программная Реализация и Интеграция

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

• HTML/CSS/JavaScript: Разработана структура HTML для нового меню, стилизовано с помощью CSS, и реализовано интерактивное поведение с помощью JavaScript. Были использованы современные подходы для обеспечения высокой производительности и плавности анимаций.
• Интеграция с CMS: Ключевым моментом была разработка модулей или настройка существующих компонентов CMS (систем управления контентом), позволяющих администраторам сайта легко добавлять, редактировать и удалять пункты меню, а также указывать наличие подкатегорий без привлечения программистов. Это обеспечивает полную автономность в поддержке и развитии навигации.
• Тестирование: Проведено комплексное тестирование функционала на различных устройствах и в различных браузерах для выявления и устранения возможных ошибок и недостатков. Тестирование включало проверку корректности отображения, скорости отклика, кликабельности всех элементов и соответствия требованиям административной панели.

Этап 4: Развертывание и Мониторинг

После успешного тестирования, обновленное меню было развернуто на основных сайтах molniya.com.ua и molniya.eu.com/de/. После развертывания был проведен мониторинг для отслеживания поведения пользователей и выявления любых неожиданных проблем или возможностей для дальнейшей оптимизации.

Отриманий результат