Skip to content

Instantly share code, notes, and snippets.

@aaroneaton
Last active March 7, 2017 19:10
Show Gist options
  • Save aaroneaton/8e98659078932cc9ba73 to your computer and use it in GitHub Desktop.
Save aaroneaton/8e98659078932cc9ba73 to your computer and use it in GitHub Desktop.
Using the Zurb Foundation Top Bar with WordPress menus
<?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;
}
}
<?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";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment