How to construct a custom html for submenus

Question

How to write a walker class for constructing a new submenus. for my wordpress theme the submenu is looking like this:

<li class="drop">
                <a data-scroll-nav='2'>Home</a>
</li>
    <li class="drop">
                <a data-scroll-nav='2'>About Us</a>
                <div class="dropdownContain">
                        <div class="dropOut">
                            <div class="triangle"></div>
                            <ul>
                                <li>Plan</li>
                                <li>Account Settings</li>
                                <li>Switch Account</li>
                                <li>Sign Out</li>
                            </ul>
                        </div>
                    </div>
      </li>
<li class="drop">
                <a data-scroll-nav='2'>Contact</a>
</li>

In above the menu structure is main menus-> hom, about us, contact. and about us menu has 4 submenus - plan, account settings, switch account, sign out.

And i'm not using wp_nav_menu() in header file. just using the sidebar and add menu through widgets.

My menus are working correctly in wordpress. now i need to develop the submenu as like the above. can anyone please tell me how to write the walker class for this submenu?

So far i tried this function but didn't worked.

function mmy_walker_nav_menu_start_el(&$output, $depth = 0, $args = array()) {

        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class=\"dropdownContain\"><div class=\"dropOut\"><div class=\"triangle\"></div><ul class=\"sub-menu\">\n";

        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div></div>\n";

    return $output;
}
add_filter('walker_nav_menu_start_el', 'mmy_walker_nav_menu_start_el', 10, 4);

Answer 1

Okays.. i've solved this in my own way. i have added the following function in functions.php file

class ik_walker extends Walker_Nav_Menu{        
    //start of the sub menu wrap
    function start_lvl(&$output, $depth) {
        $output .= '<div class="dropdownContain">
                        <div class="dropOut">
                            <div class="triangle"></div>
                                <ul>';
    }

    //end of the sub menu wrap
    function end_lvl(&$output, $depth) {
        $output .= '
                    </ul>
                </div>

        </div>';
    }


}

and in the header.php file menu section added this wp_nav_menu

wp_nav_menu( array(
    'container' => false, 
    'menu_id' => 'nav', 
    'depth' => 0,
    'theme_location' => 'primary', 

    'walker' => new ik_walker())
);