Проект: Разработка и верстка главного меню сайта

Контекст задачи

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

Тип и функциональность меню

• Структура ролловеров: пункт «Услуги» (как родительский) и подпункт внутри него «Пересадка волос» (как вложенное меню второго уровня). При нажатии на родительский пункт должен открываться первый уровень подменю, при нажатии на «Пересадка волос» - раскрываться второй уровень со списком конкретных услуг.
• Событие открытия: допускается как по клику, так и по наведению курсора (триггер следует выбрать наиболее устойчивый для UX, но везде применяется единый принцип срабатывания). Мобильная версия работает только по клику.

Адаптивные версии

Десктопная версия (1025px+ и более)

• Ширина подменю: две колонки равной высоты.
• Расположение: меню крепится в шапке сайта; выпадающий блок располагается прямо под ссылками, привязан к краю шапки по ширине, но в пределах основной плоскости хедера.
• Раскрытие: плавное (CSS-анимация появления/исчезновения).

Мобильная и планшетная версии (380px - 1024px)

• Меню работает в формате аккордеона (вертикальный список пунктов).
• При клике на родительский пункт происходит раскрытие блока с подпунктами; остальные разделы аккордеона закрываются (режим автоматического закрытия}. Для вложенного пункта «Пересадка волос» характерно еще одно логическое вложение внутри блока.
• Деление на колонки отсутствует - все пункты выводятся линейно.

Требования по вёрстке

• Технологии: валидный HTML5 + чистый CSS (препроцессоры - по выбору, но без heavy-фреймворков), Pure JavaScript / ES6 (без jQuery).
• Семантика: навигация обернута в <блок тега nav>, внутри корректно разведены ссылки и триггерные элементы. Сохранить корректную ARIA-разметку для поддержки доступности.
• Состояния полей в десктопной версии: прописана визуальная индикация при наведении (cursor: pointer, ховер-эффект с сменой цвета или подчеркивания), активная текущая страница выделена другим видом.

Безопасность и конфиденциальность

Упоминания конкретного названия компании или прямые ссылки на сайт в ТЗ отсутствуют - меню разрабатывается обобщенно для медицинского направления.