WP NAV MENU - Выпадающее меню всегда отображается

Содержание

Вопрос или проблема
Ответ или решение
1. Проверьте HTML-структуру вашего меню
2. Добавьте CSS для скрытия подменю
3. Использование JavaScript/jQuery (опционально)
4. Убедитесь в правильности регистрации меню
Заключение

Вопрос или проблема

У меня есть проблемы с корректной работой wp_nav_menu. Это первый раз, когда я с этим работаю, и в большинстве случаев все сработало. Единственная проблема, с которой я сталкиваюсь, – это функциональность выпадающих меню. Все страницы отображаются правильно в соответствующем месте (основная навигация), но “выталкивающиеся” или выпадающие подменю всегда появляются.

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

Также я хотел бы отметить, что это пользовательская тема. Я построил ее с нуля. Она также находится в тестовой среде, и будет сложно показать вам живой пример. По этой причине я прикрепил скриншот.

wp_nav_menu( array(
     'menu' => 'Основная навигация',
     'container_class' => 'primaryNav',
     'depth'           => 2,
     'fallback_cb' => 'none',
     'theme_location' => 'Основная навигация',
));

register_nav_menu( 'Основная навигация', 'Основная навигация' );

add_theme_support( 'menus' );

Я столкнулся с двумя возможностями. Я видел упоминания о “walker”, в чем я почти ничего не понимаю. ИЛИ, возможно, все так просто, как добавить немного jQuery, чтобы они работали? У меня создается впечатление, что функциональность уже должна быть?

Заранее спасибо за любую помощь.

Уилл

Вам нужно изменить файл style.css. Что вам следует сделать, так это взглянуть на ваш исходный код и увидеть структуру, которую вы создали для вашего меню, а затем изменить меню соответственно. В интернете много учебных пособий, вам просто нужно вбить в Google “учебник по css меню” или “пример css меню”, и вы найдете решение вашей проблемы.

Ответ или решение

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

1. Проверьте HTML-структуру вашего меню

Сначала вам нужно убедиться, что HTML-структура вашего меню формируется правильно. Вызов wp_nav_menu() создает стандартный вывод для меню. Используйте инструменты разработчика в вашем браузере (обычно F12) для проверки структуры DOM, чтобы увидеть, как выглядит ваше меню. По умолчанию WordPress создает вложенные списки для подменю. Вот пример, на что следует обратить внимание:

<ul class="primaryNav">
    <li>
        <a href="#">Главная</a>
        <ul>
            <li><a href="#">Подстраница 1</a></li>
            <li><a href="#">Подстраница 2</a></li>
        </ul>
    </li>
    <li><a href="#">Контакты</a></li>
</ul>

2. Добавьте CSS для скрытия подменю

Чтобы подменю были скрыты по умолчанию, вам нужно добавить соответствующие стили в ваш файл style.css. Например:

.primaryNav ul {
    display: none; /* Скрыть все подменю */
}

.primaryNav li:hover > ul {
    display: block; /* Показать подменю при наведении */
}

.primaryNav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.primaryNav li {
    position: relative;
}

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

3. Использование JavaScript/jQuery (опционально)

Если вы хотите добавить некоторую интерактивность, например, чтобы подменю открывались или закрывались по клику, вы можете использовать jQuery. Убедитесь, что jQuery загружен в вашей теме (обычно он загружается по умолчанию в WordPress). Добавьте следующий код в файл functions.php или в отдельный файл JS и подключите его:

jQuery(document).ready(function($) {
    $('.primaryNav li').hover(function() {
        $(this).children('ul').stop(true, true).slideDown(200);
    }, function() {
        $(this).children('ul').stop(true, true).slideUp(200);
    });
});

Этот код будет вызывать эффект "скольжения" при наведении на элементы меню с подменю.

4. Убедитесь в правильности регистрации меню

Вы правильно зарегистрировали меню и вызываете его, но проверьте, чтобы ваши параметры были заданы корректно:

function register_my_menus() {
    register_nav_menus(
        array(
            'primary_navigation' => __( 'Primary Navigation' )
        )
    );
}
add_action( 'init', 'register_my_menus' );

wp_nav_menu( array(
    'theme_location' => 'primary_navigation',
    'container_class' => 'primaryNav',
    'depth' => 2,
));

Заключение

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

WP NAV MENU – Выпадающее меню всегда отображается