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="http://example.com">Home</a></li>
    <li><a href="http://example.com/custompage">Page</a></li>
    <li><a href="http://example.com/custompage2">Page2</a></li>
    <li><a href="http://example.com/custompage3">Page3</a>
        <ul class="sub-menu">
            <li><a href="http://example.com/custompage3/submenu">Submenu</a></li>
            <li><a href="http://example.com/custompage3/submenu1">Submenu1</a></li>
            <li><a href="http://example.com/custompage3/submenu2">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="http://example.com">Home</a></li>
    <li><a href="http://example.com/custompage">Page</a></li>
    <li><a href="http://example.com/custompage2">Page2</a></li>
    <li><a href="http://example.com/custompage3" 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="http://example.com/custompage3/submenu">Submenu</a></li>
                <li class="cell"><a href="http://example.com/custompage3/submenu1">Submenu1</a></li>
                <li class="cell"><a href="http://example.com/custompage3/submenu2">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 !