Ask your WordPress questions! Pay money and get answers fast! (more info)

Creating driven wordpress mega menu

  • SOLVED

Hello
I have a site that i'm building which is very closed to be finished.
I have a mega menu on this site which is built responsivelyy
and for now it is hard coded in the theme.
I need to convert this mega menu to work from within the wordpress dashboard so the user can easily control it from the menus section.

I need a custom code and not a plugin.
I think it can be done using a "walker" class.

here is the website:
http://www.clients.tipoos.com/ida/

I think you can grab the HTML from the source code and create it, however, if you will need an FTP access I will provide it to the chosen developer

Thanks
GIl

Answers (3)

2014-04-24

Sébastien | French WordpressDesigner answers:

the mega menu will be only in the last tab ?



I give a solution below. This solution works perfectly. But this another solution is more "wordpress expert" :)

use a code like that to display your menu (note the walker) :
wp_nav_menu( array(
'container' =>false,
'menu_class' => 'nav',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new fwd_megamenu())
);


and add this code to your file functions.php

/***********************************************************************************
customize the display of wp_nav_menu
split the submenu into columns (3 items per list)
by Sebastien | french wordpressdesigner | superpositif.com
http://wpquestions.com/question/showChronoLoggedIn/id/9521
***********************************************************************************/
$superpositif = 0;
$count=0;

class superpositif_megamenu extends Walker_Nav_Menu {


function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
if($depth == 0) $output .= "\n$indent<div class=\"mega-menu-section\">
$indent<div class=\"wrapper\">
$indent<ul class=\"drop-dow\">\n";
else $output .= "\n$indent<ul class=\"sub-menu\">\n";

}


function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
if($depth == 0) $output .= "$indent</ul>\n
$indent</div>\n
$indent</div>\n";
else $output .= "$indent</ul>\n";
}


function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $superpositif;
$superpositif++;
global $count;
$count++;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;


$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';


$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';


if ($superpositif == 4) {
$output .= "\n$indent</ul>$indent<ul class=\"drop-dow\">\n";
$superpositif = 1;
}
$output .= $indent . '<li' . $id . $class_names .'>';

$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';

$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}

if ($item->menu_item_parent == 0) $superpositif = 0;
$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;
if ($superpositif == 4) $superpositif = 0;

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


} // Walker_Nav_Menu


hamergil comments:

No.
it has to work dynamically for all tabs
unless the user didn't add a sub menu to the parent menu item.


Sébastien | French WordpressDesigner comments:

increase your fee for a code :)


hamergil comments:

For how much?



hamergil comments:

it is over my budget but I will if it will work perfectly and the user will be able to manage it easily
from the admin panel.
please confirm.


Sébastien | French WordpressDesigner comments:

I confirm.
The menu will be able to manage easily from the admin panel (exatly like another menu, no difference).

But the menu will be displayed exactly as you want (3 items per column)


hamergil comments:

It has to contain more than 3 columns.
Should be as dynamic as possible.
Why we have to limit it to 3 columns if there is room for more?
Please confirm that it's possible

Thanks


Sébastien | French WordpressDesigner comments:

I write : "3 items PER column"
not "3 columns"
:)


Sébastien | French WordpressDesigner comments:

replace "test" by your menu name in the first line
and use this code to display your menu :)

$menu_name = 'test';
$menu = wp_get_nav_menu_object($menu_name);
$menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
?>

<ul class="nav">
<?php
$count = 0;
$submenu = false;

$i=0;
$output = '';

foreach( $menuitems as $item ){
$link = $item->url;
$title = $item->title;

//if no parent
if ( !$item->menu_item_parent ) {
$parent_id = $item->ID;
$output .= '<li>
<a href="'.$link.'">'.$title.'</a>';
}

if ( $parent_id == $item->menu_item_parent ) {

if ( !$submenu ) {
$submenu = true;
$output .= '<div class="mega-menu-section">
<div class="wrapper">
<ul class="drop-dow">';
}

$i++;
$output .= '<li>
<a href="'.$link.'">'.$title.'</a>
</li>';

if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) {
$output .= '</ul>
</div>
</div>';
$submenu = false;
} else if($i==3) {
$output .= '</ul>
<ul class="drop-dow">';
$i=0;
}
}

if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ) {
$output .= '</li>';
$submenu = false;
}

$count++;
}
echo $output; ?>

</ul>


hamergil comments:

OK
I increased the prize to 65
waiting for your solution..
please notice that the flow of the site is right to left
I am not sure it's an important issue but just keep that in mind

Thanks


hamergil comments:

Hi
Im getting this error:
Warning: Invalid argument supplied for foreach() in /home/coo4ntst/public_html/ida/wp-content/themes/ida/functions.php on line 2174
?>


and it totally destroyed my website and made all the text gibberish (see attached)

please check