Menu icon Foundation
Foundation 6 Mega Menu Walker for WordPress?

I'm having a lot of trouble converting my old F5 walker to F6, I'm not too comfortable with php so I don't fully understand it. Does anyone have a F6 Mega Menu walker?

This is the basic HTML that I'm using:

<div class="top-bar menu-centered" id="main-menu">
    <ul class="menu vertical large-horizontal" data-responsive-menu="accordion large-dropdown">
      <li class="has-submenu">
        <a href="#">Top Link With Dropdown</a>
        <ul class="submenu mega menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Top Link Two</a></li>
      <li><a href="#">Top Link Three</a></li>
        <li><a href="#">Top Link Four</a></li>
        <li><a href="#">Top Link Five</a></li>
    </ul>
</div>

Hoping someone can help.  Thanks!

mega menuResponsiveF6foundation 6wordpressWalkerdropdownaccordionvertical

I'm having a lot of trouble converting my old F5 walker to F6, I'm not too comfortable with php so I don't fully understand it. Does anyone have a F6 Mega Menu walker?

This is the basic HTML that I'm using:

<div class="top-bar menu-centered" id="main-menu">
    <ul class="menu vertical large-horizontal" data-responsive-menu="accordion large-dropdown">
      <li class="has-submenu">
        <a href="#">Top Link With Dropdown</a>
        <ul class="submenu mega menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Top Link Two</a></li>
      <li><a href="#">Top Link Three</a></li>
        <li><a href="#">Top Link Four</a></li>
        <li><a href="#">Top Link Five</a></li>
    </ul>
</div>

Hoping someone can help.  Thanks!

Jade over 3 years ago

 omg. I'm an idiot.

 

I forgot to add the /vendor to 2 of the .js files links...

 

I'm so sorry!! The code I'm using above WORKS, if anyone's interested...

 

over n out...

Jade over 3 years ago

Forgot to mention I have an image for the mobile menu toggle, separately.  This was the plain HTML that works outside of wordpress:

 

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="large">
  <div class="title-bar-title small-9 column"><a href="#"><img src="images/logo.png" alt="mylogoalt"></a></div>
    <div class="hamburger small-3 column"><button class="menu-icon" type="button" data-toggle><img src="images/hamburger.png"></button></div>
</div>

<div class="top-bar menu-centered" id="main-menu">
    <ul class="menu vertical large-horizontal" data-responsive-menu="accordion large-dropdown">
      <li class="has-submenu">
        <a href="#">Top Link</a>
        <ul class="submenu mega menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Top Link</a></li>
      <li class="join"><a href="#">Top Link</a></li>
        <li><a href="#">Top Link</a></li>
        <li><a href="#">Top Link</a></li>
    </ul>
</div>

Jade over 3 years ago

I tried the Top Bar walker but it's not working properly, the hamburger is always there and when you resize smaller, the mobile menu is just expanded. Not sure what to change, really, I'm not very good with php.

 

This is my walker:

class gs_walker extends Walker_Nav_Menu {
    
    /*
	 * Add vertical menu class and submenu data attribute to sub menus
	 */
	 
	function start_lvl( &$output, $depth = 0, $args = array() ) {
		$indent = str_repeat("\t", $depth);
		$output .= "\n$indent<ul class=\"submenu mega menu vertical\" data-submenu>\n";
	}
}

//Optional fallback
function f6_topbar_menu_fallback($args)
{
	/*
	 * Instantiate new Page Walker class instead of applying a filter to the
	 * "wp_page_menu" function in the event there are multiple active menus in theme.
	 */
	 
	$walker_page = new Walker_Page();
	$fallback = $walker_page->walk(get_pages(), 0);
	$fallback = str_replace("<ul class='children'>", '<ul class="children submenu menu vertical" data-submenu>', $fallback);
	
	echo '<ul class="menu vertical large-horizontal" data-responsive-menu">'.$fallback.'</ul>';
}

 

And this is the HTML to show the menu:

<div class="top-bar menu-centered" id="main-menu">
    <?php wp_nav_menu( array(
	'theme_location'  => 'main_menu',
	'container'       => false,
	'menu_class'      => 'menu vertical large-horizontal',
	'items_wrap'      => '<ul class="%2$s" data-responsive-menu="accordion large-dropdown">%3$s</ul>',
	'depth'           => 0,
	'walker' => new gs_walker
	)
);
?>
</div>

 

I know it's messed up... The code I tested in plain HTML works perfectly, I just don't know how to create the walker for it.

Rafi Benkual over 3 years ago

Looks like there is a F6 Walker class listed on the resources page: http://foundation.zurb.com/sites/resources.html Might be easier to start with it.