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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter JacobTheDev

    (@revxx14)

    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?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘A custom walker to break a menu in to multiple unordered lists’ is closed to new replies.