Как создать и настроить круговое меню в WordPress без плагинов

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

Что такое круговое меню и зачем оно нужно

Круговое меню — это навигационный элемент, пункты которого расположены по окружности вокруг центра. Оно привлекает внимание, позволяет компактно разместить ссылки и может стать фирменным элементом дизайна сайта.

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

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

Создание базовой структуры меню в WordPress

Для начала нам нужно создать меню в админке WordPress и вывести его в теме. Создайте меню в разделе Внешний вид — Меню и добавьте необходимые пункты.

Далее зарегистрируем это меню в файле functions.php вашей темы wpelement:

function wpelement_register_circle_menu() {
    register_nav_menu('circle-menu', 'Круговое меню');
}
add_action('after_setup_theme', 'wpelement_register_circle_menu');

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

<nav class="wpelement-circle-menu">
    <?php
    wp_nav_menu([
        'theme_location' => 'circle-menu',
        'container' => false,
        'menu_class' => 'circle-menu-list',
        'fallback_cb' => false
    ]);
    ?>
</nav>

CSS для позиционирования меню по окружности

Главная задача — расположить пункты меню равномерно по кругу. Для этого нам нужно применить абсолютное позиционирование элементов и немного математики для расчёта углов.

Предположим, что у нас есть 6 пунктов меню. Расстояние от центра и угол между пунктами зададим в CSS и JavaScript.

Основной CSS для контейнера и пунктов меню:

.wpelement-circle-menu {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 40px auto;
}

.circle-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

.circle-menu-list li {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
}

.circle-menu-list li a {
    display: block;
    padding: 10px 15px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.circle-menu-list li a:hover {
    background: #005177;
}

JavaScript для динамического размещения пунктов по кругу

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

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.circle-menu-list li');
    const radius = 120; // Радиус круга
    const startAngle = -90; // Начальный угол, чтобы первый пункт был сверху
    const step = 360 / menuItems.length;

    menuItems.forEach((item, index) => {
        const angle = startAngle + step * index;
        const rad = angle * (Math.PI / 180);
        const x = radius * Math.cos(rad);
        const y = radius * Math.sin(rad);

        item.style.transform = `translate(${x}px, ${y}px)`;
    });
});

Этот скрипт вычисляет координаты каждого пункта на круге и смещает элементы с помощью CSS transform: translate(). Таким образом, меню остаётся адаптивным и легко настраиваемым.

Адаптивность и улучшение UX кругового меню

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

Добавьте в CSS медиа-запросы для смены расположения:

@media(max-width: 600px) {
    .wpelement-circle-menu {
        width: 100%;
        height: auto;
    }
    .circle-menu-list li {
        position: static;
        transform: none !important;
        margin-bottom: 10px;
    }
}

Так вы сохраните удобство навигации для всех пользователей.

Расширение функционала: добавление анимации и интеграция с Clearfy Pro

Чтобы сделать меню ещё более заметным, можно добавить плавную анимацию появления пунктов при загрузке страницы:

.circle-menu-list li {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.circle-menu-list li.visible {
    opacity: 1;
}

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.circle-menu-list li');
    const radius = 120;
    const startAngle = -90;
    const step = 360 / menuItems.length;

    menuItems.forEach((item, index) => {
        const angle = startAngle + step * index;
        const rad = angle * (Math.PI / 180);
        const x = radius * Math.cos(rad);
        const y = radius * Math.sin(rad);

        item.style.transform = `translate(${x}px, ${y}px)`;
        setTimeout(() => {
            item.classList.add('visible');
        }, index * 100);
    });
});

Если вы используете плагин Clearfy Pro, можно дополнительно оптимизировать загрузку и скрипты меню, отключив лишние ресурсы на страницах, где меню не используется.

Заключение

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

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