1

I'am working on a custom megamenu that will look like

        <li class="l-nav-item l-mega dropdown"><button class="open-icon visible-xs fa fa-angle-down"></button><a href=" ">Services</a>
            <div class="l-nav-mega dropdown-menu full-width">
              <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
                  <a class="mega-title" href="">Tite from submenu 1</a>
                  <hr>
                  <a href=""><i class="fa fa-phone"></i>Link from submenu level 2</a>
                  <a href=""><i class="fa fa-laptop"></i>Portfolio</a>
                  <a href=""><i class="fa fa-tablet"></i>Responsive</a>
                  <a href=""><i class="fa fa-cc-visa"></i>Layouts</a>
                  <a href=""><i class="fa fa-gamepad"></i>Megamenu</a>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
                  <a href="">Title from level 1</a>
                  <hr>
                  <a class="mega-title" href="">Tite from submenu 1</a>
                  <hr>
                  <a href=""><i class="fa fa-phone"></i>Link from submenu level 2</a>
                  <a href=""><i class="fa fa-recycle"></i>Responsive</a>
                  <a href=""><i class="fa fa-paw"></i>Layouts</a>
                  <a href=""><i class="fa fa-magic"></i>Megamenu</a>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
                  <a class="mega-title" href="">Tite from submenu 1</a>
                  <hr>
                  <a href=""><i class="fa fa-phone"></i>Link from submenu level 2</a>
                  <a href=""><i class="fa fa-rocket"></i>Responsive</a>
                  <a href=""><i class="fa fa-cab"></i>Layouts</a>
                  <a href=""><i class="fa fa-microphone"></i>Megamenu</a>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
                  <a class="mega-title" href="">Tite from submenu 1</a>
                  <hr>
                  <a href=""><i class="fa fa-phone"></i>Link from submenu level 2</a>
                  <a href=""><i class="fa fa-google"></i>Responsive</a>
                  <a href=""><i class="fa fa-pinterest"></i>Layouts</a>
                  <a href=""><i class="fa fa-android"></i>Megamenu</a>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
                  <a class="mega-title" href="">Tite from submenu 1</a>
                  <hr>
                  <a href=""><i class="fa fa-phone"></i>Link from submenu level 2</a>
                  <a href=""><i class="fa fa-credit-card"></i>Responsive</a>
                  <a href=""><i class="fa fa-google-wallet"></i>Layouts</a>
                  <a href=""><i class="fa fa-bitcoin"></i>Megamenu</a>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
                  <a class="mega-title" href="">Tite from submenu 1</a>
                  <hr>
                  <a href=""><i class="fa fa-phone"></i>Link from submenu level 2</a>
                  <a href=""><i class="fa fa-euro"></i>Responsive</a>
                  <a href=""><i class="fa fa-rouble"></i>Layouts</a>
                  <a href=""><i class="fa fa-jpy"></i>Megamenu</a>
                </div>
              </div>
            </div>
          </li>    

I'm using those variables

private $megamenu_state;
private $column_state;
private $megatype_state;
private $megamenu_start;
private $column_total = 0;

to get data from menu input

enter image description here

I want the megamenu to be from the 2nd submenu and not from the first like the picture below

Mega menu structure wanted

and not like my current megamenu

Current mega menu

this is my walker

class Mega_Eddy_Walker_Nav_Menu extends Walker_Nav_Menu {

private $megamenu_state;
private $column_state;
private $megatype_state;
private $megamenu_start;
private $column_total = 0;
// Add .dropdown and a caret to dropdown links
function display_element($element, &$children_elements, $max_depth = 0, $depth=0, $args, &$output) {
    $id_field = $this->db_fields['id'];
    $megamenu = 0;
       $column = 1;
       if($depth == 1){
            $column = get_post_meta( $item->menu_item_parent, '_menu_item_column', true );
            $megamenu = get_post_meta( $item->menu_item_parent, '_menu_item_megamenu', true );
            $mega_type = get_post_meta( $item->menu_item_parent, '_menu-item-megatype', true );
       }
    // if(!empty($children_elements[$element->$id_field]) && $megamenu == 0 ) {
    //     $element->title .= '<button class="fa fa-plus visible-xs visible-ms"></button> <b class="caret"></b>';
    // }

if ( is_object( $args[0] ) ) {
    $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
}
    Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, $depth, $args, $output);

}

function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
  {
       global $wp_query;

       $megamenu = 0;
       $column = 1;
       if($depth == 1){
            $column = get_post_meta( $item->menu_item_parent, '_menu_item_column', true );
            $megamenu = get_post_meta( $item->menu_item_parent, '_menu_item_megamenu', true );
            $megatype = get_post_meta( $item->menu_item_parent, '_menu-item-megatype', true );
       }


        $this->megamenu_state = $item->megamenu;
        $this->column_state = $item->column;
        $this->megatype_state = $item->megatype;



        $mejamenu = wp_get_nav_menu_object($item->menu_item_parent);
    var_dump($mejamenu);


       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

       $class_names = $value = '';

       $classes = empty( $item->classes ) ? array() : (array) $item->classes;
       $labelclass = (isset($item->nav_label) && ($item->nav_label == 1))? ' show-label' : ' hide-label';
       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = '';
       $submenu = ($depth == 0 || !$args->has_children)? '':' dropdown ';
       $button = ($args->has_children)?'<button class="open-icon visible-xs fa fa-angle-down"></button>':'';




       if($this->megamenu_start == 1 && $depth == 1){
        $class_names = '';
       }
       else{
       $class_names = esc_attr( $class_names ). $labelclass;
        }
       $classo = ($depth == 0 && $item->megamenu == 1 )? '<li class="l-nav-item l-mega dropdown menu-item-':'<li class="l-nav-item dropdown menu-item-';
       $classo = ($depth == 1 && $this->megamenu_start == 1) ? '': $classo;
       $classo = ($depth != 0 && $this->megamenu_start == 0 ) ? '<li class="l-nav-subitem dropdown menu-item-': $classo;
       if(!isset($item->column) || $item->column == 0){
        $item->column = 1;
       }
       if($this->megamenu_start == 1){
       $columns = 12/$item->column;
       $column_total += $columns;

        }

        $column_break == ($column_total % 12 == 0) ? '<div class="clearfix">' : '';

       if($this->megamenu_start == 1 && $depth == 1 && $this->megatype_start != 4){
        $output .= $indent.'<div class="col-md-'.$columns.' col-sm-4">';
       }
       elseif($this->megamenu_start == 1 && $depth == 1 && $this->megatype_start == 4){
        $output .= $indent;
       }
       else{
        $output .= $indent . $classo . $item->ID . $value . $class_names.'">'.$button;
       }



       $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        ) .'"' : '';



       $description  = ! empty( $item->description ) ? '<span class="'.esc_attr( $item->description ).'"></span>' : '';

      /** if($depth != 0){
           $description = $append = $prepend = "";
       }*/

        $item_tag = ($this->megamenu_start == 0 || $depth != 1) ? '<a' : '';
        $item_tag_close = ($this->megamenu_start == 0 || $depth != 1) ? '</a>' : '';
        $item_tag = ($this->megamenu_start == 0 || $depth != 1) ? '<a' : '';
        $item_tag_close = ($this->megamenu_start == 0 || $depth != 1) ? '</a>' : '';
        $item_tag = ($this->megamenu_start == 0 || $depth != 1) ? '<a' : '';
        $item_tag_close = ($this->megamenu_start == 0 || $depth != 1) ? '</a>' : '';

        if($this->megamenu_start == 0 || $depth != 1){
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'><i class="'.$item->subtitle.'"></i>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $args->link_after;
        $item_output .= $description.'</a>';
        $item_output .= $args->after;
        }

        if($this->megamenu_start == 1 && $depth == 1 && $item->megatype == 1){
        $columns = ($this->column_state);
        $columns = ($this->column_state == 0) ? 2 : $columns;
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'><i class="'.$item->subtitle.'"></i>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $args->link_after;
        $item_output .= $description.$megawidget.'</a>';
        $item_output .= $args->after;
        }

        if($this->megamenu_start == 1 && $depth == 1 && $item->megatype == 2){
        $columns = ($this->column_state);
        $columns = ($this->column_state == 0) ? 3 : $columns;
        $item_output = $args->before;
        $item_output .= '<a class="image-thumbnail ratio-4-3"'. $attributes .'>';
        $item_output .= '<img src="'.$item->subtitle.'" alt="...">';
        $item_output .= '</a>';
        }


        if($this->megamenu_start == 1 && $depth == 1 && $item->megatype == 4){
        $columns = ($this->column_state);
        $columns = ($this->column_state == 0) ? 2 : $columns;
        ob_start();
        the_widget( 'Aderna_Megamenu_Widget' );
        $widget = ob_get_contents();
        ob_end_clean();
        $item_output .= $widget;

        }

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }

public function end_el( &$output, $item, $depth = 0, $args = array() ) {

    $classo = ($depth == 1 && $this->megamenu_start == 1) ? '</div>': '</li>';
    if($this->megamenu_start == 1 && $this->megatype_start == 4 && $depth == 1){
        $classo = '';
    }

    $output .= $classo."\n";
}
// Add .dropdown-menu to the submenu
function start_lvl( &$output, $item, $depth = 0, $args = array()) {

    global $wp_query;

       $megamenu = 0;
       $column = 1;
        if($depth == 1){
        $column = get_post_meta( $item->menu_item_parent, '_menu_item_column', true );
        $megamenu = get_post_meta( $item->menu_item_parent, '_menu_item_megamenu', true );
        $megamenu_type = get_post_meta( $item->menu_item_parent, '_menu_item_megatype', true );
        }

    if ($this->megamenu_state == 0){
        $classes = array( 'l-nav-sublist dropdown-menu' );
    }
    if ($this->megamenu_state == 1)
    {

        $classes = array( 'l-nav-mega dropdown-menu full-width' );
        }
    $class_names = implode( ' ', $classes );
    // build html
   // $instyle = ($this->megamenu_state == 1)?'<ul class="':'<ul class="';

        if ( $this->megamenu_state == 1 ) {
            $instyle = '<div class="';
            $rowstyle ='<div class="row">';
        } else {
            $instyle = '<ul class="';
            $rowstyle = '';
        }


   $output .= "\n" . $indent . $instyle . $class_names . '">'."\n".$rowstyle."\n";

$this->megamenu_start = $this->megamenu_state;
   $this->megatype_start = $this->megatype_state;

}


function end_lvl(&$output, $depth=0, $args=array()) {

        if ( $this->megamenu_start == 1 ) {
            $instyle = '</div>'.$indent."\n".'</div>';
        }
        else {
            $instyle = '</ul>';
        }

    // $instyle = ($this->megamenu_state == 1)?'</div>':'</ul>';
    $output .= $indent.$instyle."\n";


}
}

html code output by the walker

<li class="l-nav-item l-mega dropdown menu-item-750 show-label"><button class="open-icon visible-xs fa fa-angle-down"></button><a href="http://localhost/wordpress-kaiogen/category/home-slider/"><i class="fa fa-wifi"></i>Home Slider</a>
  <div class="l-nav-mega dropdown-menu full-width">
   <div class="row">
    <div class="col-md-2 col-sm-4"><a href="http://localhost/wordpress-kaiogen/activity/"><i class="fa fa-phone"></i>Activity</a></div>
    <div class="col-md-3 col-sm-4"><a class="image-thumbnail ratio-4-3" href="http://localhost/wordpress-kaiogen/sample-page/"><img src="http://www.whatsappfor.org/wp-content/uploads/2014/12/tablets-montage.jpg" alt="..."></a></div>
    <div class="col-md-2 col-sm-4"><a href="http://localhost/wordpress-kaiogen/about-us-2/"><i class="fa fa-paw"></i>About us</a></div>
    <div class="col-md-2 col-sm-4"><a href="http://localhost/wordpress-kaiogen/services/"><i class="fa fa-magic"></i>services</a></div>
    <div class="col-md-3 col-sm-4"><a class="image-thumbnail ratio-4-3" href="http://localhost/wordpress-kaiogen/about-us/"><img src="http://cdn.liliputing.com/wp-content/uploads/2013/09/surface-21.jpg" alt="..."></a>   </div>
    <div class="col-md-2 col-sm-4"><a href="http://localhost/wordpress-kaiogen/members/"><i class="fa fa-laptop"></i>Members</a></div>
    <div class="col-md-4 col-sm-4"><a href="http://localhost/wordpress-kaiogen/groups/"><i class="fa fa-cc-visa"></i>Groups</a></div>
    <div class="col-md-4 col-sm-4"><a href="http://localhost/wordpress-kaiogen/shop/"><i class="fa fa-twitter"></i>Shop</a></div>
    <div class="col-md-4 col-sm-4"><a href="http://localhost/wordpress-kaiogen/columns/"><i class="fa fa-google"></i>Columns</a></div>
    <div class="col-md-4 col-sm-4"><a href="http://localhost/wordpress-kaiogen/checkout/"><i class="fa fa-microphone"></i>Checkout</a></div>
    <div class="col-md-4 col-sm-4"><a href="http://localhost/wordpress-kaiogen/my-account/"><i class="https://cdn3.pcadvisor.co.uk/cmsdata/features/3451310/Tablet_Group_test_206PCA_206_Photoshoot-212.jpg"></i>My Account</a></div>
    <div class="col-md-4 col-sm-4"><a href="http://localhost/wordpress-kaiogen/cart/"><i class="fa fa-wordpress"></i>Cart</a></div>
    </div>
  </div>
</li>

Note : with my current walker if i added a second level submenu all thing break and becomes like

<li class="l-nav-item l-mega dropdown menu-item-750 show-label"><button class="open-icon visible-xs fa fa-angle-down"></button><a href="http://localhost/wordpress-kaiogen/category/home-slider/"><i class="fa fa-wifi"></i>Home Slider</a>
 <div class="l-nav-mega dropdown-menu full-width">
  <div class="row">
   <div class="col-md-2 col-sm-4"><a href="http://localhost/wordpress-kaiogen/activity/"><i class="fa fa-phone"></i>Activity</a></div>
   <div class="col-md-3 col-sm-4"><a class="image-thumbnail ratio-4-3" href="http://localhost/wordpress-kaiogen/sample-page/"><img src="http://www.whatsappfor.org/wp-content/uploads/2014/12/tablets-montage.jpg" alt="..."></a>
     <ul class="l-nav-sublist dropdown-menu">

       <li class="l-nav-subitem dropdown menu-item-116 show-label"><a href="http://localhost/wordpress-kaiogen/about-us-2/"><i class="fa fa-paw"></i>About us</a>      </li>
     </ul>
  </li>
  <li class="l-nav-subitem dropdown menu-item-755 show-label"><a href="http://localhost/wordpress-kaiogen/services/"><i class="fa fa-magic"></i>services</a></li>
  <li class="l-nav-subitem dropdown menu-item-754 show-label"><a href="http://localhost/wordpress-kaiogen/about-us/"><i class="http://cdn.liliputing.com/wp-content/uploads/2013/09/surface-21.jpg"></i>Portfolio</a></li>
  <li class="l-nav-subitem dropdown menu-item-1416 show-label"><a href="http://localhost/wordpress-kaiogen/members/"><i class="fa fa-laptop"></i>Members</a></li>
  <li class="l-nav-subitem dropdown menu-item-1415 show-label"><a href="http://localhost/wordpress-kaiogen/groups/"><i class="fa fa-cc-visa"></i>Groups</a></li>
  <li class="l-nav-subitem dropdown menu-item-1421 show-label"><a href="http://localhost/wordpress-kaiogen/shop/"><i class="fa fa-twitter"></i>Shop</a></li>
  <li class="l-nav-subitem dropdown menu-item-758 show-label"><a href="http://localhost/wordpress-kaiogen/columns/"><i class="fa fa-google"></i>Columns</a></li>
  <li class="l-nav-subitem dropdown menu-item-1419 show-label"><a href="http://localhost/wordpress-kaiogen/checkout/"><i class="fa fa-microphone"></i>Checkout</a></li>
  <li class="l-nav-subitem dropdown menu-item-1418 show-label"><a href="http://localhost/wordpress-kaiogen/my-account/"><i class="https://cdn3.pcadvisor.co.uk/cmsdata/features/3451310/Tablet_Group_test_206PCA_206_Photoshoot-212.jpg"></i>My Account</a></li>
  <li class="l-nav-subitem dropdown menu-item-1420 show-label"><a href="http://localhost/wordpress-kaiogen/cart/"><i class="fa fa-wordpress"></i>Cart</a>  </li>
 </ul>
</li>

Finally i think the walker code look crapy so i hope you help me to clean or use better alternative coding techniques

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.