jon-c
6/14/2015 - 5:03 PM

Using the Zurb Foundation Top Bar with WordPress menus

Using the Zurb Foundation Top Bar with WordPress menus

<?php

class TopBarNavigationWalker extends \Walker_Nav_Menu {

	public function start_lvl( &$output, $depth = 0, $args = array() ) {
		// depth dependent classes
		$indent        = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent
		$display_depth = ( $depth + 1 ); // because it counts the first submenu as 0
		$classes       = array(
			'sub-menu',
			( $display_depth % 2 ? 'menu-odd' : 'menu-even' ),
			( $display_depth >= 2 ? 'sub-sub-menu' : '' ),
			'menu-depth-' . $display_depth,
			'dropdown',
		);
		$class_names   = implode( ' ', $classes );

		// build html
		$output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
	}

}
<?php

class Navigation {

	public function __construct() {

		// Move the navigation to the header element
		remove_action( 'genesis_after_header', 'genesis_do_nav' );
		remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
//		remove_action( 'genesis_header', )
		add_action( 'genesis_header', 'genesis_do_nav', 6 );

		// Use a custom walker for the primary nav
		add_filter( 'genesis_do_nav', array( $this, 'custom_nav_walker' ), 10, 3 );

		// Add custom 'has-dropdown' class to parent menu items
		add_filter( 'wp_nav_menu_objects', array( $this, 'custom_parent_class' ) );

		// Add custom 'active' class when needed
		add_filter( 'nav_menu_css_class', array( $this, 'custom_active_class' ), 10, 2 );

	}

	public function custom_nav_walker( $nav_output, $nav, $args ) {

		$args['menu_class'] = $args['menu_class'] . ' right';
		$args['walker']     = new TopBarNavigationWalker;

		$site_name = apply_filters( 'highway_site_title', get_bloginfo( 'name' ) );

		$title = '<ul class="title-area"><li class="name"><h1><a href="' . home_url() . '">' . $site_name . '</a></h1></li><li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li></ul>';

		$nav = sprintf( '%s<section class="top-bar-section">%s %s</section>',
			$title,
			wp_nav_menu( $args ),
			apply_filters( 'highway_nav_elements', '' )
		);

		$nav_markup_open = genesis_markup( array(
			'html5'   => '<div class="top-bar-wrapper contain-to-grid sticky"><nav class="nav-primary top-bar" data-topbar data-options="is_hover: false;scrolltop: false">',
			'xhtml'   => '<div id="nav">',
			'context' => 'nav-primary',
			'echo'    => false,
		) );

		$nav_markup_open .= genesis_structural_wrap( 'menu-primary', 'open', 0 );

		$nav_markup_close = genesis_structural_wrap( 'menu-primary', 'close', 0 );
		$nav_markup_close .= genesis_html5() ? '</nav></div>' : '</div>';

		$nav_output = $nav_markup_open . $nav . $nav_markup_close;

		return $nav_output;

	}

	public function custom_parent_class( $items ) {

		$parents = array();
		foreach ( $items as $item ) {
			if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
				$parents[] = $item->menu_item_parent;
			}
		}

		foreach ( $items as $item ) {
			if ( in_array( $item->ID, $parents ) ) {
				$item->classes[] = 'has-dropdown';
			}
		}

		return $items;
	}

	public function custom_active_class( $classes, $item ) {

		if ( $item->current == 1 || $item->current_item_ancestor == true ) {
			$classes[] = 'active ';
		}

		return $classes;

	}

	public function display_search() {

		$output = sprintf( '<ul class="menu-search-container"><div class="search"><li>%s</li></div></ul>',
			get_search_form( false )
		);

		return $output;

	}

}