Main/WordPress Fullstack/Blueprints/Custom Themes/Responsive Mega-Menu with Custom Walker_Nav_Menu & SVG Icons
Back to «Custom Themes» cards
Custom Themes(ТЗ 22 из 54)
Spec: Responsive Mega-Menu with Custom Walker_Nav_Menu & SVG Icons
Custom Themes5 шагов • +25 XP

Spec: Responsive Mega-Menu with Custom Walker_Nav_Menu & SVG Icons

Multi-column accessible mega-menu engineering: extending Walker_Nav_Menu, custom admin menu fields (badges, icons, banners), CSS Grid dropdown layout, full keyboard navigation, and mobile drawer.

~10 ч работыУровень: MiddlePHP 8.3 OOPWalker_Nav_Menuwp_nav_menu_item_custom_fieldsCSS Grid & FlexboxKeyboard A11y (ARIA)Vanilla JS Mobile Drawer
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)

ТЗ заказчика (исходный бриф):

Our eCommerce catalog has over 30 categories. The standard WordPress dropdown menu is impossible to navigate. We need a modern, multi-column mega-menu with category icons, featured banners, keyboard accessibility, and a smooth mobile accordion.
Ключевые требования:
  • •Custom admin fields for menu items: SVG icon picker, badge text (e.g. 'NEW', 'HOT'), and mega-menu toggle
  • •PHP Walker class extending Walker_Nav_Menu with custom HTML structure and ARIA attributes
  • •CSS Grid multi-column layout for mega-menu dropdowns with promotional banner integration
  • •Full WCAG 2.1 AA keyboard accessibility: Tab, Arrow keys, Escape to close, aria-expanded states
  • •Mobile drawer with animated hamburger toggle and multi-level accordion navigation
Ограничения проекта:
  • •Zero third-party mega-menu plugins (Max Mega Menu, UberMenu) — 100% native lightweight code
  • •Must work seamlessly with WordPress Appearance > Menus interface
  • •No layout shift (CLS = 0) during menu open/close transitions
Критерии приёмки (KPI):
  • WCAG 2.1 AA compliance audit passes 100%
  • Menu JavaScript bundle < 8KB gzipped
  • Keyboard focus visible and trapped within active dropdowns

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Step 1: Custom admin fields for menu items

~40 минСредний

Практическое руководство:

Hook into wp_nav_menu_item_custom_fields to add fields: 'Is Mega Menu' checkbox, 'Icon Class/SVG', 'Badge Text', and 'Featured Image ID'. Save field values via wp_update_nav_menu_item.

План и контрольные точки реализации:
1Подключить хук wp_nav_menu_item_custom_fields
2Добавить чекбокс включения Mega-Menu и поля для бейджа/иконки
3Реализовать сохранение в wp_update_nav_menu_item с защитой nonce
4Убедиться, что значения сохраняются при перезагрузке страницы меню
Важные технические нюансы и подводные камни:

Sanitize all custom menu field inputs with sanitize_text_field and boolval before saving to post meta.

Ожидаемый артефакт этапа:

Административный интерфейс для управления параметрами каждого пункта меню.

PHP
<?php
// functions.php - Кастомные поля в меню админки
declare(strict_types=1);

add_action('wp_nav_menu_item_custom_fields', function (int $item_id): void {
    $is_mega = get_post_meta($item_id, '_menu_item_is_mega', true);
    $badge   = get_post_meta($item_id, '_menu_item_badge', true);
    $icon    = get_post_meta($item_id, '_menu_item_icon', true);
    ?>
    <p class="field-is-mega description description-wide">
        <label for="edit-menu-item-is-mega-<?php echo esc_attr((string) $item_id); ?>">
            <input type="checkbox" id="edit-menu-item-is-mega-<?php echo esc_attr((string) $item_id); ?>" 
                   name="menu-item-is-mega[<?php echo esc_attr((string) $item_id); ?>]" value="1" <?php checked($is_mega, '1'); ?> />
            <strong>Включить отображение Mega-Menu для этого раздела</strong>
        </label>
    </p>
    <p class="field-badge description description-thin">
        <label for="edit-menu-item-badge-<?php echo esc_attr((string) $item_id); ?>">
            Текст бейджа (напр. "Хит" или "New"):<br />
            <input type="text" id="edit-menu-item-badge-<?php echo esc_attr((string) $item_id); ?>" 
                   name="menu-item-badge[<?php echo esc_attr((string) $item_id); ?>]" 
                   value="<?php echo esc_attr((string) $badge); ?>" class="widefat" />
        </label>
    </p>
    <p class="field-icon description description-thin">
        <label for="edit-menu-item-icon-<?php echo esc_attr((string) $item_id); ?>">
            Иконка (название класса):<br />
            <input type="text" id="edit-menu-item-icon-<?php echo esc_attr((string) $item_id); ?>" 
                   name="menu-item-icon[<?php echo esc_attr((string) $item_id); ?>]" 
                   value="<?php echo esc_attr((string) $icon); ?>" class="widefat" />
        </label>
    </p>
    <?php
}, 10, 1);

add_action('wp_update_nav_menu_item', function (int $menu_id, int $menu_item_db_id): void {
    check_admin_referer('update-nav_menu', 'update-nav-menu-nonce');

    $is_mega = isset($_POST['menu-item-is-mega'][$menu_item_db_id]) ? '1' : '';
    update_post_meta($menu_item_db_id, '_menu_item_is_mega', $is_mega);

    if (isset($_POST['menu-item-badge'][$menu_item_db_id])) {
        $badge = sanitize_text_field((string) $_POST['menu-item-badge'][$menu_item_db_id]);
        update_post_meta($menu_item_db_id, '_menu_item_badge', $badge);
    }

    if (isset($_POST['menu-item-icon'][$menu_item_db_id])) {
        $icon = sanitize_text_field((string) $_POST['menu-item-icon'][$menu_item_db_id]);
        update_post_meta($menu_item_db_id, '_menu_item_icon', $icon);
    }
}, 10, 2);
2
Этап 2 из 5

Step 2: Custom_Mega_Menu_Walker class extending Walker_Nav_Menu

~55 минСложный
3
Этап 3 из 5

Step 3: CSS Grid multi-column dropdown layout & banners

~35 минСредний
4
Этап 4 из 5

Step 4: A11y accessibility & keyboard navigation logic

~30 минСредний
5
Этап 5 из 5

Step 5: Mobile drawer & accordion submenus

~35 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция