Need a Custom Walker Class for a tabbed Mega Menu WordPress
- REFUNDED
Hi,
i need a Custom Walker Class for Worpress Mega menu . The $link_css_class comes from a custom field in my menu and should be output in div.vertical-tabs-content. I don't know how I can leave the hierarchical structure to create the vertical tabs content container area for my tab-content.
This is my html.
<ul>
<li><a href="#">Topic 1</a>
<div class="drop-down-large">
<!-- vertical tabs container -->
<div class="vertical-tabs-container">
<div class="container-fluid space-0">
<div class="col-sm-3 col-md-2 clearfix space-0">
<!-- vertical tab -->
<div class="vertical-tabs">
<!-- active -->
<a class="active" href="#menu-item-426">Subtopic 1</a>
<a href="#menu-item-326">Subtopic 2</a>
</div>
</div>
<div class="col-sm-9 col-md-10 space-0">
<!-- vertical tabs content container -->
<div class="vertical-tabs-content-container">
<!-- this is vertical tabs content 1 -->
<div id="menu-item-426" class="vertical-tabs-content"><!-- tabs content goes gere --></div>
<!-- this is vertical tabs content 2 -->
<div id="menu-item-326" class="vertical-tabs-content"><!-- tabs content goes gere --></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li><a href="#">Topic 2</a>
<div class="drop-down-large">
<!-- vertical tabs container -->
<div class="vertical-tabs-container">
<div class="container-fluid space-0">
<div class="col-sm-3 col-md-2 clearfix space-0">
<!-- vertical tab -->
<div class="vertical-tabs">
<!-- active -->
<a class="active" href="#menu-item-626">Subtopic 22</a>
<a href="#menu-item-526">Subtopic 22</a>
</div>
</div>
<div class="col-sm-9 col-md-10 space-0">
<!-- vertical tabs content container -->
<div class="vertical-tabs-content-container">
<!-- this is vertical tabs content 1 -->
<div id="menu-item-626" class="vertical-tabs-content"><!-- tabs content goes gere --></div>
<!-- this is vertical tabs content 2 -->
<div id="menu-item-526" class="vertical-tabs-content"><!-- tabs content goes gere --></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
and my custom walker so far
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"sub-menu\"><div class=\"drop-down-large\"><div class=\"vertical-tabs-container\"><div class=\"container-fluid space-0\"><div class=\"col-sm-3 col-md-3 clearfix space-0\"><div class=\"vertical-tabs\">\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "$indent</ul>\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$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="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$link_css_class = get_field( 'image', $item->ID );
$output .= $indent . '<li' . $id . $value . $class_names . '> <img src="' . $link_css_class . '">';
$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 ) . esc_attr( $item->ID ) . '"' : '';
//HERE IT IS
$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";
}
}
Thanks in advance
Answers (2)
IndiTheme - answers:
I have create mega menu for my theme. Please see here http://moozakue.inditheme.com/
I use horizontal tab in mega menu. I think my code can be use just need little change for vertical tab.
Andre comments:
Hi,
thanks for your answer. I think that could be possible. How are you create the content for your tabs? I have some costum fields (with ACF) in Appearance -> Menus, where I want to create the content for the tabs, and can i use my custom fields with your megamenu?
IndiTheme - comments:
I am not using ACF. I am using custom field and custom functions/class. Here is my menu page screenshot.
https://postimg.org/image/efwzy3zxp/90c3529a/
I am populate post for sub menu from "format post", "category", and "tags".
Andre comments:
Ok, I see. I do not know exactly if it would work with your theme. Do you see a way to extend the Custom Walker Class?
Thx
IndiTheme - comments:
Can i try in your theme? Please if you don't mind send your theme file to my mail. I will try now.
my mail: [email protected]
Thanks
Andre comments:
k, i send you a mail.
best
Andre
IndiTheme - comments:
Thanks. I will waiting your mail.
IndiTheme - comments:
Hi Andre,
I am not receive your mail until now. Can you resend?
Thanks
Andre comments:
Hi,
ok sent the mail again.
Strange, I have the mail sent yesterday without any problems, maybe you look in your spam folder. My email address is: rex*******@me.com
best
Andre
IndiTheme - comments:
Ok. I got it. I will try now.
Thanks
Andre comments:
Hi,
What about your try, any progress?
best
Andre
Arnav Joy answers:
Hi ,
Can you show me your site and send me files too please ??
my mail is : [email protected]
Andre comments:
Hi Arnav,
There is no page online, just my local dev. i send you a mail with my theme so far .
Andre