Головна/WordPress Fullstack/Блупринти/Кастомні теми/Розробка адаптивного Mega-Menu з кастомним Walker_Nav_Menu та іконками
До карток розділу «Кастомні теми»Кастомні теми(ТЗ 22 из 54)
ТЗ: Розробка адаптивного Mega-Menu з кастомним Walker_Nav_Menu та іконкамиТрудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)
ТЗ заказчика (исходный бриф):
У нашому інтернет-магазині понад 30 категорій товарів. Стандартне випадаюче меню WordPress незручне. Потрібно розробити багаторівневе Mega-Menu з іконками категорій, банерами акцій, повною підтримкою клавіатури та мобільним акордеоном.
Ключевые требования:
- •Кастомні поля для пунктів меню в адмінці: вибір SVG-іконки, текст бейджа ('NEW', 'TOP') та чекбокс Mega-Menu
- •PHP-клас на базі Walker_Nav_Menu з генерацією семантичної розмітки та атрибутів ARIA
- •Сітка CSS Grid для випадаючих панелей із розміщенням промо-банерів поруч із категоріями
- •Повна доступність WCAG 2.1 AA: підтримка Tab, стрілок, закриття через Escape, атрибути aria-expanded
- •Адаптивне мобільне меню зі шторкою та плавними акордеонами підкатегорій
Ограничения проекта:
- •Жодних сторонніх плагінів меню (Max Mega Menu, UberMenu) — тільки чистий нативний код
- •Повна сумісність зі стандартним розділом керування меню Зовнішній вигляд > Меню
- •Відсутність зсуву макета (CLS = 0) під час відкриття та закриття списків
Критерии приёмки (KPI):
- 100% проходження тесту доступності WCAG 2.1 AA
- Розмір JavaScript-файлу меню < 8КБ gzipped
- Видимий клавіатурний фокус та утримання фокусу всередині відкритих панелей
Пошаговое практическое руководство по ТЗ
Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу: