A custom walker to break a menu in to multiple unordered lists
-
I’ve built a mega menu that requires the following markup:
<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> <a href="#">Portfolio</a> <section> <ul> <li><a href="#">Logos</a></li> <li><a href="#">Business Cards</a></li> </ul> <ul> <li class="break"><a href="#">Web Sites</a></li> <li><a href="#">Plugins</a></li> </ul> <!-- must be a widget --> <aside> <h6>Contact Us</h6> <p>Contact us for a free quote todaay!</p> </aside> <!-- end must be a widget --> </secction> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul>
Using a custom walker, I’ve come close, but I still can’t figure out how to add in the
</ul><ul>
where it belongs. Essentially I want my walker to check for the class of “break” on an<li>
and if it exists, place</ul><ul>
just before that<li>
. Additionally, it needs to only affect that level of drop down. So, for example, the user shouldn’t be able to break the top level menu (ul li
) or the third level menu (ul li ul li ul li
), just the second level (ul li ul li
). I hope that makes sense.Here’s my walker so far:
class megaMenuWalker extends Walker_Nav_Menu { function start_lvl(&$output, $depth = 0, $args = array()) { if ($depth == 0) { $output .= "<section>"; } $output .= "<ul class=\"sub-menu\">"; } function end_lvl(&$output, $depth = 0, $args = array()) { $output .= "</ul>"; if ($depth == 0) { ob_start(); dynamic_sidebar("Navigation Callout"); $widget = ob_get_contents(); ob_end_clean(); $output .= $widget; $output .= "</section>"; } } }
I’m really close, it’s just that break that’s killing me. I managed to get it working kind of with
$output = str_replace("<li class=\"break", "</ul><ul><li class=\"", $output);
, but that also affects the parent li, and I feel like it’s hacky because it’s just replacing bits of code instead of identifying where it needs to insert new code. I think there’s got to be a better way.Thanks.
EDIT: Oh, and the user shouldn’t be able to break the fist
li
in the second level either, as that could create problems with extra closing tags.
-
This is driving me crazy because I know *exactly* how this would be done in jQuery…
$(document).ready(function() { $("nav").children("ul").children("li").children("ul").children("li").each(function() { if ($this).hasClass("break")) { $(this).before("</ul><ul>"); } }); });
@revxx14 did you sort this?
- The topic ‘A custom walker to break a menu in to multiple unordered lists’ is closed to new replies.