Ajouter un conteneur au sous-menu nav_menu


9

Existe-t-il un moyen de boucler un div autour du sous-menu ul.s de wp_nav_menu

Ainsi, par exemple, le balisage irait de

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

pour ça

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

Où "sous-menu-wrap" est le div personnalisé.

Est-ce possible?

Réponses:


21

Utilisez un marcheur personnalisé , étendez les méthodes start_lvl()et end_lvl.

Exemple de code, non testé:

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

Utilisation dans votre thème:

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

Est-il possible d'apporter des modifications par élément de menu? Par exemple, la classe d'élément de menu est-elle disponible à l'intérieur Walker_Nav_Menuet ce sont des enfants?
Dan.

@Dan. Oui, ça l'est.
fuxia

@fuxia, cette approche est-elle toujours saine pour WP 5+, ou recommandez-vous une technique alternative pour accomplir la même chose?
klewis

@klewis Cela devrait toujours fonctionner.
fuxia

Comment faire cela uniquement au premier niveau.
jho1086
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.