Добавление контейнера к подменю nav_menu

Question

Добавление контейнера к подменю nav_menu

3 янв. 2013 г., 17:44:22

Просмотры: 28.9K

Голосов: 10

Есть ли способ обернуть div вокруг ul.sub-menu в wp_nav_menu?

Например, чтобы разметка изменилась с такой:

<ul class="menu">

    <li><a href="/">Пункт 1</a></li>
    <li>
        <a href="/">Пункт 2</a>

        <ul class="sub-menu">

            <li><a href="/">Пункт 1</a></li>
            <li><a href="/">Пункт 1</a></li>

        </ul>
   </li>
    <li><a href="/">Пункт 1</a></li>
    <li><a href="/">Пункт 1</a></li>

</ul>

на такую:

<ul class="menu">

    <li><a href="/">Пункт 1</a></li>
    <li>
        <a href="/">Пункт 2</a>

        <div class="sub-menu-wrap">

            <ul class="sub-menu">

                <li><a href="/">Пункт 1</a></li>
                <li><a href="/">Пункт 1</a></li>

            </ul>

        </div>

   </li>

    <li><a href="/">Пункт 1</a></li>
    <li><a href="/">Пункт 1</a></li>

</ul>

Где "sub-menu-wrap" - это пользовательский div.

Это возможно?

Dean Elliott

1.2K

функции меню

Все ответы на вопрос

Комментарии

Можно ли вносить изменения для каждого элемента меню отдельно? Например, доступен ли класс элемента меню внутри Walker_Nav_Menu и его дочерних элементов?

Dan.

8 мая 2017 г. 19:08:10

@Dan. Да, это возможно.

fuxia

8 мая 2017 г. 19:08:40

@fuxia, остается ли этот подход актуальным для WP 5+ или вы рекомендуете альтернативный метод для достижения того же результата?

klewis

9 янв. 2019 г. 16:29:26

@klewis Это всё ещё должно работать.

fuxia

9 янв. 2019 г. 16:30:15

Как сделать это только на первом уровне.

jho1086

31 окт. 2019 г. 10:04:24

Показать остальные 1 комментариев

Предлагаемое решение не совсем корректно работает с WordPress - игнорируются стандартные фильтры и код WordPress. Я предлагаю более элегантное решение, которое сохраняет работу всех фильтров, таких как 'nav_menu_submenu_css_class', и другого стандартного кода WordPress:

<?php
/**
 * Оборачивает подменю в div-элемент
 */
class My_Menu_Walker extends Walker_Nav_Menu {

    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $output .=
        '<div class="wrapper">';
        parent::start_lvl($output, $depth, $args);
    }

    public function end_lvl( &$output, $depth = 0, $args = null ) {
        parent::end_lvl($output, $depth, $args);
        $output .= '</div>';
    }

}

Lovor

996

11 янв. 2022 г. 00:20:38

fuxia 107K · Accepted Answer · 2013-01-03T17:57:59Z

Используйте собственный Walker, расширьте методы start_lvl() и end_lvl().

Пример кода (не тестировался):

class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class='sub-menu-wrap'><ul class='sub-menu'>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

Использование в вашей теме:

wp_nav_menu(
    array (
        'theme_location' => 'your-theme-location-EDIT-THIS',
        'walker'         => new WPSE_78121_Sublevel_Walker
    )
);

fuxia

107K

3 янв. 2013 г. 17:57:59