Fügen Sie dem Untermenü nav_menu einen Container hinzu


9

Gibt es eine Möglichkeit, wie ich ein Div um das ul.sub-Menü von wp_nav_menu wickeln kann?

So würde zum Beispiel das Markup von gehen

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <ul class="sub-menu">

            <li><a href="/">Item 1</a></li>
            <li><a href="/">Item 1</a></li>

        </ul>
   </li>
    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

dazu

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

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

            <ul class="sub-menu">

                <li><a href="/">Item 1</a></li>
                <li><a href="/">Item 1</a></li>

            </ul>

        </div>

   </li>

    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

Wobei "Untermenü-Wrap" das benutzerdefinierte Div ist.

Ist das möglich?

Antworten:


21

Verwenden Sie einen benutzerdefinierten Walker , erweitern Sie die Methoden start_lvl()und end_lvl.

Beispielcode, nicht getestet:

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";
    }
}

Verwendung in Ihrem Thema:

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

Ist es möglich, Änderungen pro Menüpunkt vorzunehmen? zB ist die Menüpunktklasse im Inneren verfügbar Walker_Nav_Menuund es sind Kinder?
Dan.

@Dan. Ja ist es.
Fuxia

@fuxia, ist dieser Ansatz für WP 5+ noch gesund, oder empfehlen Sie eine alternative Technik, um dasselbe zu erreichen?
Klewis

@klewis Das sollte noch funktionieren.
Fuxia

Wie das nur im ersten Level geht.
jho1086
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.