I'm building a mobile navigation menu. I wan't the menu to work like this:
In this image you see a mobile nav with multiple depth levels.
This is how I wan't the code structure to look like:
<ul> <li></li> <li class="menu-item-has-children"> <div class="toggle-button"></div> <a href=""></a> <ul class="submenu"> <li></li> <li class="menu-item-has-children"> <div class="toggle-button"></div> <a href=""></a> <ul class="submenu"></ul> </li> </ul> </li> </ul>
You can see a menu item "Products" with children that are hidden.
Below you see "Industries". Here the children are shown when the toggle button to the right is clicked. The children of the next submenu level can also be toggled and so on.
I'm outputting all menu items with
'depth' => '0', and now I wan't submenus to be expandable.
To do this I need to add a toggle HTML element (see the code structure above) for which I can use jQuery to toggle an "active" class on the parent element, which then reveals the children.
How can I add this toggle element inside all
<li> elements, that have children, for all depth levels?
I think I need to filter
wp_nav_menu or add a custom walker function, but I'm not sure how.