0

If I want a menu like this to work, how would I do it with a walker?

I want to be able to include a button after the parent element, which toggles the sub-menu. Also, I must be able to put different functions on the buttons.

<nav>
    <ul>
        <li><a href="#">Page 1</a>
            <button class="toggle" onClick="function1()">+</button>
            <ul class="sub-menu">
                <li>Page 1.1</li>
                <li>Page 1.2</li>
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a>
            <button class="toggle" onClick="function2()">+</button>
            <ul class="sub-menu">
                <li>Page 3.1</li>
                <li>Page 3.2</li>
            </ul>
        </li>
        <li><a href="#">Page 4</a></li>
    </ul>
</nav>

I already have the wp_nav_menu set up:

<?php wp_nav_menu(array(
    'menu'       => 'Main Navigation',
    'container'  => false,
    'items_wrap' => '<ul">%3$s</ul>',
    'walker'     => new my_walker_nav_menu()
));

And my walker:

class my_walker_nav_menu extends Walker_Nav_Menu
{
    public function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<button @click='function1'>+</button><ul class='sub-menu'>\n";
    }
}

I'm hoping my end result will be something like this:

Picture of menu

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.