Wordpress: Customising output of wp_nav_menu, adding a div before nested ul

Question

Hi there,

I'm building a site which uses a mega drop-down style menu which is styled using containing divs around the nested ul of the sub-menu.

Does anybody know how to customise the output of the menu generated by Wordpress (wp_nav_menu) to add containing divs around the nested sub-menu ul?

There are two parameters which are

'before' => '', 'after' => '',

but unfortunately these only add content before the actual link rather than the whole sub-menu.

If you have any pointers or have done this before I'd really appreciate it.

Cheers,

Dave

Answer 1

Managed to sort this problem!

Used a custom walker as below to add the containing div's

class Walker_Page_Custom extends Walker_Nav_Menu {
/**
 * @see Walker::start_lvl()
 * @since 2.1.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param int $depth Depth of page. Used for padding.
 */
function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<div class='sub'><div class='sub-top'><!-- --></div><!--sub-left --><div class='sub-mid'><ul>\n";
}

/**
 * @see Walker::end_lvl()
 * @since 2.1.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param int $depth Depth of page. Used for padding.
 */
function end_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul><span class='clear'><!-- --></span></div><!--sub-mid --><div class='sub-bottom'><!-- --></div><!--sub-bottom --><span class='clear'><!-- --></span></div><!--sub -->\n";
}

}

and then included it in the wp_nav_menu array as below

 'walker' => new Walker_Page_Custom

Hope this helps somebody!

Dave