Motion UI and WP sub-menus

[swthate]

Hi folks,

On a new project I started out doing some prototyping on a static html page. On that static page I was able to get the desktop menu to behave perfectly: just a top-bar with a menu on the right, each menu item had a submenu, and I added some Motion UI to it so that the submenus hinged up and down.

Now I'm trying to get it to work in WordPress, and I'm having a hard time. I have a feeling I need to extend Walker_Nav_Menu, but I've never dealt with a walker before, so I'm a bit in over my head right now!

I've done some reading on WP's walkers, but still pretty confused.

Here's what I tried to do: Basically I just copied one of the extensions in menu-walkers.php and created a new test walker. My test walker is at the bottom:

if ( ! class_exists( 'Foundationpress_Top_Bar_Walker' ) ) :
  class Foundationpress_Top_Bar_Walker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
      $output .= "\n$indent<ul class=\"dropdown menu vertical\" data-toggle>\n";
    }
  }

  if ( ! class_exists( 'Foundationpress_Mobile_Walker' ) ) :
    class Foundationpress_Mobile_Walker extends Walker_Nav_Menu {
        function start_lvl( &$output, $depth = 0, $args = array() ) {
            $indent = str_repeat("\t", $depth);
            $output .= "\n$indent<ul class=\"vertical nested menu\">\n";
        }
    }
  endif;

  // Test
  if ( ! class_exists( 'Steven_Custom_Submenu_Walker' ) ) :
    class Steven_Custom_Submenu_Walker extends Walker_Nav_Menu {
      function start_lvl( &$output, $depth = 1, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"menu submenu vertical\" data-submenu id=\"submenu-1\" data-toggler data-animate=\"hinge-in-from-top hinge-out-from-top\">\n";
      }
    }
  endif;

endif;

However, when I take a look at my menu with Chrome dev tools, the data attributes and id that I tried to add via the walker aren't showing up. What did I do wrong?

Also, as far as I know, in order to get the Motion UI to work for each menu/submenu, they need unique IDs. Eg, #submenu-1 for first menu item, #submenu-2 for the second, etc. Using the walker, what's a good way to do that?

Thanks for any help in advance...!

Steven

[swthate]

Has no one used Motion UI on sub-menus?

[linuxbastard]

Hi @swthate,

Can you confirm that this is still the case with current FP version?

You need to call your walker when you are constructing your menu, as with the last line of the example menu below:

if ( ! function_exists( 'foundationpress_top_bar_r' ) ) {
	function foundationpress_top_bar_r() {
		wp_nav_menu( array(
			'container'      => false,
			'menu_class'     => 'dropdown menu',
			'items_wrap'     => '<ul id="%1$s" class="%2$s desktop-menu" data-dropdown-menu>%3$s</ul>',
			'theme_location' => 'top-bar-r',
			'depth'          => 3,
			'fallback_cb'    => false,
			'walker'         => new Steven_Custom_Submenu_Walker(),
		));
	}
}