WordPress Menu & Walker for ZURB's Foundation 3 Nav Bar

readme.txt

Adding a Foundation 3 Nav Bar to WordPress

This code should be added to the WordPress functions.php file.

Call the menu in your theme by using <?php foundation_nav_bar(); ?>

Setup a menu in WordPress admin under Appearance > Menus

Note: the function main_nav_fb() could be used to echo an error instead of wp_list_pages() as a menu. Another option is to set 'fallback_cb' => false. If you choose to not use wp_list_pages() the page_walker is not needed.

Foundation 3 Navigation Docs: http://foundation.zurb.com/old-docs/f3/navigation.php

foundation3-navbar-menu.php

<?php
add_theme_support('menus'); 

/*
http://codex.wordpress.org/Function_Reference/register_nav_menus#Examples
*/
register_nav_menus( array(
	'main-menu' => 'Main Menu' // registers the menu in the WordPress admin menu editor
) );


/* 
http://codex.wordpress.org/Function_Reference/wp_nav_menu 
*/
function foundation_nav_bar() {
    wp_nav_menu(array( 
        'container' => false,             // remove menu container
        'container_class' => '',          // class of container
        'menu' => '',                     // menu name
        'menu_class' => 'nav-bar',        // adding custom nav class
        'theme_location' => 'main-menu',  // where it's located in the theme
        'before' => '',                   // before each link <a>
        'after' => '',                    // after each link </a>
        'link_before' => '',              // before each link text
        'link_after' => '',               // after each link text
        'depth' => 2,                     // limit the depth of the nav
    	'fallback_cb' => 'main_nav_fb',   // fallback function (see below)
        'walker' => new nav_bar_walker()      // walker to customize menu (see foundation-nav-walker)
	));
}


/*
http://codex.wordpress.org/Template_Tags/wp_list_pages
*/
function main_nav_fb() {
	echo '<ul class="nav-bar">';
	wp_list_pages(array(
		'depth'        => 0,
		'child_of'     => 0,
		'exclude'      => '',
		'include'      => '',
		'title_li'     => '',
		'echo'         => 1,
		'authors'      => '',
		'sort_column'  => 'menu_order, post_title',
		'link_before'  => '',
		'link_after'   => '',
		'walker'       => new page_walker(),
		'post_type'    => 'page',
		'post_status'  => 'publish' 
	));
	echo '</ul>';
}
?>

foundation3-navbar-walker.php

<?php
/* 
Customize the output of menus for Foundation nav bar classes
*/

class nav_bar_walker extends Walker_Nav_Menu {

    function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
        $element->has_children = !empty($children_elements[$element->ID]);
        $element->classes[] = ($element->current || $element->current_item_ancestor) ? 'active' : '';
        $element->classes[] = ($element->has_children) ? 'has-flyout' : '';
		
        parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }	
	
    function start_el(&$output, $item, $depth, $args) {
        $item_html = '';
        parent::start_el($item_html, $item, $depth, $args);	
		
        $classes = empty($item->classes) ? array() : (array) $item->classes;	

        if(in_array('has-flyout', $classes) && $depth == 0) {
            $item_html = str_replace('</a>', '</a><a class="flyout-toggle" href="#"><span> </span></a>', $item_html);
        }
		
        $output .= $item_html;
    }

    function start_lvl(&$output, $depth = 0, $args = array()) {
        $output .= "\n<ul class=\"sub-menu flyout\">\n";
    }
    
} // end nav bar walker
?>

foundation3-page-walker.php

<?php
/*
Customize the output of page list for Foundation nav classes in main_nav_fb
*/
class page_walker extends Walker_Page {
    
    function start_el(&$output, $page, $depth, $args, $current_page) {
        $item_html = '';
    	parent::start_el($item_html, $page, $depth, $args, $current_page);
    	
    	$css_class = array('page_item', 'page-item-'.$page->ID);
    	
        if ( $args['has_children'] ) {
            $css_class[] = 'has-flyout';
        }
               
        $css_class = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );
        
        $item_html = '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

        $output .= $item_html;
    }

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $output .= "\n<a href=\"#\" class=\"flyout-toggle\"><span> </span></a><ul class=\"flyout $this->flyout_dir\">\n";
    }	

} // end page walker
?>

The problem I am facing is that, whenever I hover or click the menu item, the flyout does not appear. I am using foundation framework.

Ah, GitHub doesn't notify me of comments on gists? That's not nice of them.
I apologize for not responding to this before. I will take a look at the code again.

For some reason I had 'depth' => 1. Sometimes it's the little things. Should be fixed now!

I'm having the adverse issue. I've used this code, is there any way to get the dropdown to not show up UNTIL i click the arrow? Right now it shows up automatically on iPhones, and iPads.

Hi @morkle, I'm sorry I haven't come across this problem before. Do the menus work properly on other devices?

@awshout I'm not sure about other devices. It works great full screen on my PC, but when I go to my iPhone or iPad it has the menu's already popped out and I have to click the arrow for them to shrink back down.

That's strange. If you can link to a site or some code, I'd be happy to take a look.

@awshout If you could look at it, that'd be fantastic. I've been pulling my hair out over this foundation menu the last few days.

My site is bit.ly/ZyyN68

@morkle check the href on .flyout-toggle. Should be href="#", but it's only href

I seriously can't believe it was something that simple. It's working on my cellphone, just gotta check the iPad when I get home.

Man, three days of this and your code fixed it immediately. I seriously can't think you enough @awshout!

I know the feeling. 😄 Happy to help

awshout

I can't begin to tell you how much this walker and function have helped me. Thank you, thank you.

I do have one problem though and I cannot get a third level flout to appear. Any suggestions? I tried depth = 0 and depth = 3.

@pointclear Awesome! You're welcome. Unfortunately, the Foundation 3 nav bar didn't support a 3rd level. The top bar does though.

Thanks! That helped. I just used the left side of the top-nav and removed the fixed div.

Hi, i am using foundation and wordpress to create my portfolio site. For some reason, on smaller screens the dropdown doesn't work. I think your code might help me, but i'm fairly new to wordpress. Can you explain in a little more detail what i have to do?

You can check out my website at www.joviverheyen.be

Hi @joviverheyen, nice website! It looks like you're using the top bar from Foundation 4 (Reverie theme maybe?). This gist is for the nav bar in Foundation 3. You can look at my gist for the top bar I've updated it to work with Foundation 4. Also be sure to carefully read the Foundation Docs for the top bar. It's important to use their exact markup or the top bar doesn't function properly.

I wasn't actually using reverie, but thanks for pointing it out to me. I installed the theme and I got it working now :)

Excellent. Everything works. After small adjustments, it also works for Foundation 4.

Any reason why my walker would stop working after 6 months? On Foundation 3, and it's just not displaying the set drop down menu. Nothing's changed, what could have happened? Thanks!

@morkle i had to add a style of my own to get the drop down menu to show in ie. it needed .menu-item:hover .flyout { display:block;} hope that helps :)