I have a menu structure I built in HTML+CSS that I would like to incorporate into a WordPress menu, but I am new to extending the Walker class and was wondering if someone could show me an example of how it might work. The code I would like to output is below:
<!-- Menu Start --> <nav class="collapse navbar-collapse menu"> <ul class="nav navbar-nav sf-menu"> <li><a id="current" href="front-page.php">Current Page</a></li> <li><a href="#" class="sf-with-ul">Top Level Menu <span class="sf-sub-indicator"><i class="fa fa-angle-down"></i></span></a> <ul> <li><a href="child-page.php" class="sf-with-ul">Child Link</a></li> </ul> </li> <li><a href="page.php">Another Link No Children</a></li> </ul> </nav> <!-- Menu End -->
The nav and ul tags wrap the entire menu and do not need repeating.
The li for a single page without any child pages just needs an anchor tag inside of a bare li, except if the page is current, and add the appropriate id to the a tag.
If there is a parent item with children, display the parent link first with a "sf-with-ul" class on the a tag, then make another ul group with its li children have the same class as well.
Could anyone point me in the right direction here on how to accomplish this? Thank you.