Submenu doesn't work

[Rambou]

I've tried to create sub-menus but they don't work. Is it a bug or an non-implemented feature yet?

[braginteractive]

Material Design Lite doesn't have styling for submenus.

[Rambou]

Yes i know although one way to add submenu to this theme which is needed and there is an option on wordpress is like this.

<nav respond-plugin type="menu" menu="primary" class="mdl-navigation mdl-layout--large-screen-only">

                <li id="home" class="mdl-navigation__link" >Link 1</li>
                <a class="mdl-navigation__link" href="page/news.html">Link 2</a>
                <a class="mdl-navigation__link" href="#">Link 3</a>

                <!-- sub menu only visible when clicked on the link above -->
                <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                    for="home">
                    <a class="mdl-menu__item" href="index.html">SubLink 1</a>
                    <a class="mdl-menu__item" href="index.html">SubLink 2</a>
                </ul>
........

The question is how to edit the Custom nav_walker to make support this?

[Rambou]

Anyway i did some changes in your nav_walker class and hope that now it should work like a charm. I will make a pull request soon.

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

        $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 ) );

        if ( in_array( 'current-menu-item', $classes ) )
                $class_names .= ' is-active';

        $class_names = $class_names ? ' class="mdl-navigation__link ' . esc_attr( $class_names ) . '"' : '';

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

        $output .= $indent . '';

        $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 .= ($item->menu_item_parent)? (! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : ''): '';
        $attributes .= ! empty( $item->ID )        ? ' id="'   . esc_attr( $item->ID        ) .'"' : '';
        if ($item->menu_item_parent){
            $attributes .= 'class="mdl-menu__item"';
      }else{
            $attributes .= $class_names;
        }

        $item_output = $args->before;

        if (!$item->menu_item_parent && $previous->menu_item_parent){
            $item_output .= '</ul>';
        }

        if ($item->menu_item_parent && !$previous->menu_item_parent){
            $item_output .= '<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="'. $item->menu_item_parent.'">';
        }
        $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 );
        $previous = $item;
    }