I am trying to change the markup of my main menu. Currently I've got the following code when my menu is generated :

<ul id="menu-menu" class="menu vertical medium-horizontal">
    <li><a href="">Home</a></li>
    <li><a href="">Page</a></li>
    <li><a href="">Page2</a></li>
    <li><a href="">Page3</a>
        <ul class="sub-menu">
            <li><a href="">Submenu</a></li>
            <li><a href="">Submenu1</a></li>
            <li><a href="">Submenu3</a></li>
        </ul>
    </li>
</ul>

And i'd like to achieve the following final markup for items with submenus :

<ul id="menu-menu" class="menu vertical medium-horizontal">
    <li><a href="">Home</a></li>
    <li><a href="">Page</a></li>
    <li><a href="">Page2</a></li>
    <li><a href="" data-toggle="dropdown-custompage3">Page3</a>
        <div class="dropdown-pane" id="dropdown-custompage3" data-dropdown data-hover="true" data-hover-pane="true" data-position="bottom">
            <ul class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-3">
                <li class="cell"><a href="">Submenu</a></li>
                <li class="cell"><a href="">Submenu1</a></li>
                <li class="cell"><a href="">Submenu3</a></li>
            </ul>
        </div>
    </li>
</ul>

So the aim is to :

• add a "data-toggle" attribute to a link with submenu
• wrap the submenu in a div with an id equal to the previous data toggle value and with custom classes
• add custom classes to the sub-menu ul (grid-x grid-padding-x)
• add a "cell" class to the children ul

So far I tried to use a custom menu walker :

Template part :

wp_nav_menu( array( 
    'theme_location' => 'main-menu',
    'menu_class' => 'menu vertical medium-horizontal',
    'walker'        => new custom_nav_menu_walker
) );

Function :

class custom_nav_menu_walker extends Walker_Nav_Menu {


public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<div class=\"dropdown-pane expand\" id=\"nav-dropdown\" data-dropdown data-hover=\"true\" data-hover-pane=\"true\" data-position=\"bottom\">\n$indent<ul class=\"grid-x grid-padding-x small-up-1 medium-up-2 large-up-3\">\n";
}

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

}

This partially working as my submenu ul as the intended classes and is surrounded by a dropdown pane div but :

• Parent a doesn't have the required attribute
• "dropdown-pane" div doesn't have a custom id related to its parent
• li in submenu do not have the "cell" class

If anybody can help that would be great !