Как создать выпадающее меню в WordPress с помощью JavaScript

В этой статье мы подробно разберем, как создать собственное выпадающее меню в WordPress, используя чистый JavaScript, а также немного PHP для интеграции в тему. Выпадающие меню — одна из самых популярных и полезных функций в интерфейсе сайта, которая помогает улучшить навигацию и пользовательский опыт. Несмотря на множество готовых решений, понимание принципов создания такого меню поможет вам гибко настраивать и расширять функционал сайта.

Что такое выпадающее меню и зачем оно нужно в WordPress

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

Преимущества кастомного выпадающего меню:

• Полный контроль над дизайном и анимацией
• Возможность добавлять уникальные интерактивные эффекты
• Оптимизация под мобильные устройства и разные браузеры
• Минимизация зависимостей от сторонних плагинов

Далее мы создадим базовый пример, который вы сможете расширять под свои задачи.

Создание меню в WordPress: регистрация и вывод

Для начала зарегистрируем меню в файле functions.php вашей темы. Это позволит управлять пунктами меню из админки WordPress.

function wppopup_register_my_menu() {
    register_nav_menu('header-menu', __('Header Menu'));
}
add_action('init', 'wppopup_register_my_menu');

Теперь добавим вывод меню в нужном месте темы, обычно это header.php:

wp_nav_menu(array(
    'theme_location' => 'header-menu',
    'menu_class' => 'wppopup-menu',
    'container' => 'nav',
    'container_class' => 'wppopup-nav'
));

Обратите внимание на классы, они понадобятся для стилизации и скриптов.

Стилизация выпадающего меню с CSS

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

.wppopup-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.wppopup-menu li {
    position: relative;
    margin-right: 20px;
}
.wppopup-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    list-style: none;
    padding: 10px 0;
    min-width: 150px;
}
.wppopup-menu li:hover > ul {
    display: block;
}
.wppopup-menu li ul li {
    margin: 0;
    padding: 5px 20px;
}
.wppopup-menu li ul li:hover {
    background-color: #f0f0f0;
}

Такой CSS работает на десктопе и при наведении мыши. Но для мобильных устройств требуется JavaScript, чтобы раскрывать меню по клику.

Добавление интерактивности: JavaScript для выпадающего меню

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

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.wppopup-menu li.menu-item-has-children > a');

    menuItems.forEach(function(item) {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const submenu = this.nextElementSibling;
            if (submenu.style.display === 'block') {
                submenu.style.display = 'none';
            } else {
                // Скрываем другие открытые подменю
                document.querySelectorAll('.wppopup-menu li ul').forEach(function(el) {
                    el.style.display = 'none';
                });
                submenu.style.display = 'block';
            }
        });
    });

    // Закрыть меню при клике вне его
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.wppopup-menu')) {
            document.querySelectorAll('.wppopup-menu li ul').forEach(function(el) {
                el.style.display = 'none';
            });
        }
    });
});

Этот скрипт ищет все пункты меню с подменю и добавляет обработчик клика. При клике подменю будет открываться или закрываться.

Улучшение: поддержка клавиатуры и доступности

Для улучшения доступности стоит добавить поддержку клавиш клавиатуры, например, открывать меню по клавише Enter или пробел.

document.querySelectorAll('.wppopup-menu li.menu-item-has-children > a').forEach(function(item) {
    item.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            this.click();
        }
    });
});

Также рекомендуется использовать ARIA-атрибуты, чтобы экранные читалки корректно понимали структуру меню.

Интеграция с плагинами и расширения

Если вам не хочется писать меню с нуля, можно воспользоваться плагинами, которые позволяют кастомизировать меню, например:

• Max Mega Menu — расширяет стандартное меню WordPress, добавляя поддержку выпадающих и мега-меню с визуальным редактором.
• WP Responsive Menu — помогает быстро создать мобильное адаптивное меню с выпадающими пунктами.
• UberMenu — мощный коммерческий плагин с множеством опций и тонкой настройкой.

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

Заключение по созданию выпадающего меню в WordPress

Создание выпадающего меню с нуля дает вам гибкость и понимание, как работают основные элементы навигации. Вы научились регистрировать меню, выводить его в теме, стилизовать с помощью CSS и добавлять интерактивность через JavaScript. Эти знания позволят вам создавать удобные и красивые решения, которые повысят удобство пользователей вашего сайта.