Aggiungere un contenitore al sotto menu nav_menu

Question

Aggiungere un contenitore al sotto menu nav_menu

3 gen 2013, 17:44:22

Visualizzazioni: 28.9K

Voti: 10

C'è un modo per avvolgere un div intorno al sotto menu ul.sub-menu di wp_nav_menu?

Per esempio, vorrei trasformare il markup da questo:

<ul class="menu">

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

        <ul class="sub-menu">

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

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

</ul>

a questo:

<ul class="menu">

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

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

            <ul class="sub-menu">

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

            </ul>

        </div>

   </li>

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

</ul>

Dove "sub-menu-wrap" è il div personalizzato.

È possibile farlo?

Dean Elliott

1.2K

funzioni menu

Tutte le risposte alla domanda

Commenti

È possibile apportare modifiche per singola voce del menu? Ad esempio, la classe della voce del menu è disponibile all'interno di Walker_Nav_Menu e dei suoi figli?

Dan.

8 mag 2017 19:08:10

@Dan. Sì, lo è.

fuxia

8 mag 2017 19:08:40

@fuxia, questo approccio è ancora valido per WP 5+, o consigli una tecnica alternativa per ottenere lo stesso risultato?

klewis

9 gen 2019 16:29:26

@klewis Questo dovrebbe ancora funzionare.

fuxia

9 gen 2019 16:30:15

Come fare questo solo al primo livello.

jho1086

31 ott 2019 10:04:24

Mostra i restanti 1 commenti

La soluzione proposta non funziona bene con WordPress - il codice predefinito e i filtri di WordPress vengono ignorati. Ecco una soluzione molto più elegante, che mantiene tutti i filtri come 'nav_menu_submenu_css_class' e il resto del codice predefinito di WordPress funzionante:

<?php
/**
 * Incapsula i sottomenu in un elemento 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 gen 2022 00:20:38

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

Utilizza un walker personalizzato, estendi i metodi start_lvl() e end_lvl.

Codice di esempio, non testato:

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

Utilizzo nel tuo tema:

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

fuxia

107K

3 gen 2013 17:57:59