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.

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.

share|improve this question

Your Answer

 
discard

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

Browse other questions tagged or ask your own question.