Aggiungi contenitore al sottomenu nav_menu


9

C'è un modo per avvolgere un div nel menu ul.sub di wp_nav_menu

Quindi, per esempio, il markup andrebbe da

<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>

a questo

<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>

Dove "sottomenu-a capo" è il div personalizzato.

È possibile?

Risposte:


21

Utilizzare un walker personalizzato , estendere 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
    )
);

È possibile apportare modifiche per ogni voce di menu? ad es. la classe delle voci di menu è disponibile all'interno Walker_Nav_Menued è figlia?
Dan.

@ Dan. Sì.
fuxia

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

@klewis Questo dovrebbe ancora funzionare.
fuxia

Come farlo solo al primo livello.
jho1086,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.