Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've been trying to figure this out for days, to no avail.

A template I'm building requires a mega menu. The markup for the menu looks like this:

<nav>
    <ul>
        <li><a href="#">General Information</a></li>
        <li>
            <a href="#">Programs</a>
            <section>
                <ul>
                    <li><a href="#">Birthday Parties</a></li>
                    <li>
                        <a href="#">Athletics</a>
                        <ul>
                            <li><a href="#">Youth</a></li>
                            <li>
                                <a href="#">Adult</a>
                                <ul>
                                    <li><a href="#">Adult Softball</a></li>
                                    <li><a href="#">Adult Kickball</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Dance</a></li>
                    <li>
                        <a href="#">Variety</a>
                        <ul>
                            <li><a href="#">Youth</a></li>
                            <li><a href="#">Adult</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- this break needs to be user-specified -->
                <ul>
                    <li>
                        <a href="#">Summer Camp</a>
                        <ul>
                            <li><a href="#">Camp Firefly</a></li>
                            <li><a href="#">Camp Starfish</a></li>
                            <li><a href="#">Lil Rascals</a></li>
                            <li><a href="#">Junior Crew</a></li>
                            <li><a href="#">Little Giants</a></li>
                            <li><a href="#">Girlfriends</a></li>
                            <li><a href="#">Road Trip</a></li>
                            <li><a href="#">Sport Camp</a></li>
                            <li><a href="#">Kid Zone</a></li>
                            <li><a href="#">Last Blast</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- this break needs to be user-specified -->
                <ul>
                    <li><a href="#">Early Childhood</a></li>
                    <li><a href="#">Education</a></li>
                    <li><a href="#">Little Learners</a></li>
                    <li><a href="#">Childcare</a></li>
                    <li><a href="#">Little Learners</a></li>
                    <li><a href="#">Preschool</a></li>
                    <li><a href="#">Afterschool Program</a></li>
                </ul>
                <!-- widget -->
                <aside class="blue widget">
                    <header>
                        <h6>Download Brochures</h6>
                    </header>
                    <section>
                        <ul class="brochures">
                            <li>
                                <a href="#">
                                    <img src="img/static/brochure-spring-summer-2014.jpg" />
                                    spring/summer 2014
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/static/brochure-summer-planner-2014.jpg" />
                                    summer planner 2014
                                </a>
                            </li>
                        </ul>
                    </section>
                    <footer>
                        <a class="button" href="#">&#8250; Register Online</a>
                        <a class="button" href="#">&#8250; Create Account</a>
                    </footer>
                </aside>
                <!-- end widget -->
            </section>
        </li>
        <li><a href="#">Registration</a></li>
        <li><a href="#">Aquatics</a></li>
        <li><a href="#">Lakeview Fitness</a></li>
        <li><a href="#">Parks</a></li>
        <li><a href="#">Facilities</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</nav>

The mega menu looks like this:

I'm having three problems:

  1. I can't figure out how to add the <section> around the second level <ul>. I've written a walker that will add the section, but it adds it to every level, not just the second level.
  2. I can't figure out how to allow the user to specify where a column should break. I think I could have my client enter in a class of break on the <li> that they want to end (or start, whichever's easier) a column, but I don't know how to then check for that using PHP and add the </ul><ul> after that </li>.
  3. The blue box is a widget area. I can't figure out how to get that to show up in the navigation.

I'm completely new to nav walkers, and all this stuff is just going over my head. This stuff seems pretty simple, but after hours and hours of research, I'm still stuck.

Here's what I have so far, but I'm willing to scrap it entirely:

class megaMenuWalker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<section><ul class=\"sub-menu\">\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></section>\n";
    }
}

EDIT: What really annoys me is that I know how to solve the first two problems with jQuery, but that's not an acceptable solution...

$("nav > ul > li > ul").wrap("<section>");
$("nav .break").before("</ul><ul>");

EDIT 2: Thanks to Tyler Carter's answer below, I was able to get the section bit working. Here's my updated walker:

class megaMenuWalker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            $output .= "\n$indent<section>\n";
        }
        $output .= "<ul class=\"sub-menu\">\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent</ul>\n";
        if ($depth == 0) {
            $output .= "</section>\n";
        }
    }
}

EDIT 3: I managed to get the blue box loop working. Last thing remaining is checking for the break class. Here's my updated walker:

class megaMenuWalker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            $output .= "\n$indent<section>\n";
        }
        $output .= "<ul class=\"sub-menu\">\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent</ul>\n";
        if ($depth == 0) {
            $output .= "<aside class=\"blue widget\">\n";
                $output .= "<header>\n";
                    $output .= "<h6>Download Brochures</h6>\n";
                $output .= "</header>\n";
                $output .= "<section>\n";
                    $output .= "<ul class=\"brochures\">\n";
                        /* query */
                        $args = array(
                            "category_name" => "Brochures",
                            "order" => "ASC",
                            "posts_per_page" => "2"
                        );
                        $news = new WP_query($args);
                        while($news->have_posts()): $news->the_post();
                            $output .= "<li>\n";
                            if (get_field("pdf")):
                                $file = get_field("pdf");
                                $fileURL = $file["url"];
                                $fileTitle = $file["title"];
                                $output .= "<a href=\"$fileURL\" target=\"_blank\" title=\"$fileTitle\">";
                            endif;
                                if(has_post_thumbnail($id)):
                                    $output .= get_the_post_thumbnail($id, "full");
                                endif;
                                $testingVar = get_the_title();
                                $output .= $testingVar;
                            if (get_field("pdf")):
                                $output .= "</a>";
                            endif;

                            $output .= "</li>\n";
                        endwhile;
                        wp_reset_query();
                        /* end query */
                    $output .= "</ul>\n";
                $output .= "</section>\n";
            $output .= "</aside>\n";
            $output .= "</section>\n";
        }
    }
}

EDIT 4:

I've now figured out how to check for the break class. I had to remove the id from all the lis, but that's not a problem since I wasn't using them anyway. Final code is posted below!

share|improve this question

2 Answers 2

You can check the depth using the $depth parameter to see if you are at the section level, and only add the <section> based on that parameter.

function start_lvl(&$output, $depth = 0, $args = array()) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent";
    if ( 2 == $depth ) {
        $output .= "<section>";
    }
    $output .= "<ul class=\"sub-menu\">\n";
}

Replicate that with the end level and you can successfully make sure that the section only is present at the second depth.

share|improve this answer
    
This got me going, and I was able to get the section bit working. Still need help with the break and widget stuff though. Here's my updated walker: pastebin.com/BhBzMG8t (also updated the original post) –  Rev May 2 at 13:31
up vote 0 down vote accepted

I managed to piece this together. It's not the most elegant thing in the world, but I think it should work.

// remove ids from lis
add_filter("nav_menu_item_id", "remove_ids_from_nav", 100, 1);
function remove_ids_from_nav($var) {
    return is_array($var) ? array() : "";
}

// walker to fix drop downs
class megaMenuWalker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            $output .= "\n$indent<section>\n";
        }
        $output .= "<ul class=\"sub-menu\">\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent</ul>\n";
        if ($depth == 0) {
            $output .= "<aside class=\"blue widget\">\n";
                $output .= "<header>\n";
                    $output .= "<h6>Download Brochures</h6>\n";
                $output .= "</header>\n";
                $output .= "<section>\n";
                    $output .= "<ul class=\"brochures\">\n";
                        $args = array(
                            "category_name" => "Brochures",
                            "order" => "ASC",
                            "posts_per_page" => "2"
                        );
                        $news = new WP_query($args);
                        while($news->have_posts()): $news->the_post();
                            $output .= "<li>\n";
                            if (get_field("pdf")):
                                $file = get_field("pdf");
                                $fileURL = $file["url"];
                                $fileTitle = $file["title"];
                                $output .= "<a href=\"$fileURL\" target=\"_blank\" title=\"$fileTitle\">";
                            endif;
                                if(has_post_thumbnail($id)):
                                    $output .= get_the_post_thumbnail($id, "full");
                                endif;
                                $testingVar = get_the_title();
                                $output .= $testingVar;
                            if (get_field("pdf")):
                                $output .= "</a>";
                            endif;
                            $output .= "</li>\n";
                        endwhile;
                        wp_reset_query();
                    $output .= "</ul>\n";
                $output .= "</section>\n";
                $output .= "<footer>";
                    $output .= "<a class=\"button\" href=\"#\">&#8250; Register Online</a>";
                    $output .= "<a class=\"button\" href=\"#\">&#8250; Create Account</a>";
                $output .= "</footer>";
            $output .= "</aside>\n";
            $output .= "</section>\n";
            // enable columns
            $output = str_replace("<li class=\"break", "</ul><ul><li class=\"", $output);
        }
    }
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.