So I am trying to create a mega-menu using a custom walker through WordPress.
So far I have this for the walker:
class oe_walker extends Walker_Nav_Menu {
/**
* Specify the item type to allow different walkers
* @var array
*/
var $nav_bar = '';
function __construct( $nav_args = '' ) {
$defaults = array(
'menu_type' => 'main-menu' //enable menu differenciation, used in preg_replace classes[] below
);
$this->nav_bar = apply_filters( 'req_nav_args', wp_parse_args( $nav_args, $defaults ) );
}
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$id_field = $this->db_fields['id'];
if ( is_object( $args[0] ) ) {
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
}
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$imgsrc = $args->has_imgsrc = ! empty( $item->imgsrc ) ? $item->imgsrc : '';
$detail = $args->has_detail = ! empty( $item->detail ) ? $item->detail : '';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
// if we are at the top most level add a class to all links
if( $depth == 0 ) {
$attributes .= ' class="top-level" ';
}
$output .= '<li>';
$item_output = $args->before;
$item_output .= '<a '. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>n";
}
function start_lvl( &$output, $depth = 0, $args = array() ) {
$imgsrc = $args->has_imgsrc;
$detail = $args->has_detail;
$output .= '<div class="drawer">';
$output .= '<div class="row">';
//$output .= print_r($args);
if( !empty($detail) ) {
$output .= '<div class="large-4 columns"><p>'.$detail.'</p></div>';
}
if( !empty($imgsrc) ) {
$output .= '<div class="large-4 columns"><img src="'.$imgsrc.'" /></div>';
}
$output .= '<ul class="large-2 columns">';
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$output .= "</ul></div></div>n";
}
}
The trouble I am having is in the start_level method. Say I have 8 sub-links total.. Is there anyway I can split them up into two separate unordered lists containing 4 links each?
The markup I am currently getting:
<nav class="mega-menu">
<ul>
<li>
<a href="#">Link</a>
<div class="drawer">
<div class="row">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div><img src="" /></div>
<div><p>Text</p>
</div>
</div>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
What I would like to achieve:
<nav class="mega-menu">
<ul>
<li>
<a href="#">Link</a>
<div class="drawer">
<div class="row">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div><img src="" /></div>
<div><p>Text</p>
</div>
</div>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
Is this possible to accomplish using only 1 set of sub-links? I understand how the walker works and it creates the elements, which is mind boggling to me how I might be able to achieve this effect. Any ideas, suggestions are greatly appreciated. Thanks.