Foundation 6 is great framework for every developer, Now we can work on many things we want without worrying about responsiveness because foundation have everything today we try dropdown foundation 6 responsive menu walker for WordPress theme. Recently I write tutorial about Off-canvas menu in foundation 6 you can read it. with this increase more flexibility.

First you need to register a menu in function:
function MYTHEME_theme_setup() { add_theme_support( 'menus' ); register_nav_menus(array( 'top-menu' => __('Top Menu' , 'TEXT_DOMAIN' ), ) ); } add_action( 'after_setup_theme', 'MYTHEME_theme_setup' );
Foundation 6 Responsive Menu Walker Class
class insertcart_walker extends Walker_Nav_Menu { /** * Specify the item type to allow different walkers * @var array */ var $nav_bar = ''; function __construct( $nav_args = '' ) { $defaults = array( 'item_type' => 'li', 'in_top_bar' => false, 'menu_type' => 'main-menu' //enable menu differenciation, used in preg_replace classes[] below ); $this->nav_bar = apply_filters( 'req_nav_args', wp_parse_args( $nav_args, $defaults ) ); } function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) { $id_field = $this->db_fields['id']; if ( is_object( $args[0] ) ) { $args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); } return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output ); } function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->ID; // Additionnal Class cleanup, as found in Roots_Nav_Walker - Roots Theme lib/nav.php // see http://roots.io/ and https://github.com/roots/roots $slug = sanitize_title($item->title); $classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', '', $classes); $classes = preg_replace('/^((menu|page)[-_\w+]+)+/', '', $classes); $menu_type = $this->nav_bar['menu_type']; $classes[] = 'menu-item menu-item-' . $menu_type . ' menu-item-' . $slug; $classes = array_unique($classes); // Check for flyout $flyout_toggle = ''; if ( $args->has_children && $this->nav_bar['item_type'] == 'li' ) { if ( $depth == 0 && $this->nav_bar['in_top_bar'] == false ) { $classes[] = 'has-flyout'; $flyout_toggle = '<a href="#" class="flyout-toggle"><span></span></a>'; } else if ( $this->nav_bar['in_top_bar'] == true ) { $classes[] = 'has-dropdown'; $flyout_toggle = ''; } } $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; if ( $depth > 0 ) { $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; } else { $output .= $indent . ( $this->nav_bar['in_top_bar'] == true ? '<li class="divider"></li>' : '' ) . '<' . $this->nav_bar['item_type'] . ' id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; } // link attributes $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"'; $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', $args->before, $attributes, $args->link_before, apply_filters( 'the_title', $item->title, $item->ID ), $args->link_after, $args->after ); $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } function end_el( &$output, $item, $depth = 0, $args = array() ) { if ( $depth > 0 ) { $output .= "</li>\n"; } else { $output .= "</" . $this->nav_bar['item_type'] . ">\n"; } } function start_lvl( &$output, $depth = 0, $args = array() ) { if ( $depth == 0 && $this->nav_bar['item_type'] == 'li' ) { $indent = str_repeat("\t", 1); $output .= $this->nav_bar['in_top_bar'] == true ? "\n$indent<ul class=\"vertical menu\">\n" : "\n$indent<ul class=\"flyout\">\n"; } else { $indent = str_repeat("\t", $depth); $output .= $this->nav_bar['in_top_bar'] == true ? "\n$indent<ul class=\"vertical menu\">\n" : "\n$indent<ul class=\"level-$depth\">\n"; } } }
Include menu call in your file:
Now call menu mainly used header file, This is drill dropdown menu from foundation 6 you can read more about here. Foundation 6 responsive menu have more function and class try them all. Currently problem I’m facing on mobile device is link click on parent menu if there is submenu.
<div class="title-bar" data-responsive-toggle="responsivehide" data-hide-for="medium"> <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title"><?php _e('Menu','wrockmetro'); ?></div> </div> <div class="top-bar" id="responsivehide"> <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' => false, 'depth' => 0, 'items_wrap' => '<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">%3$s</ul>', 'walker' => new insertcart_walker( array( 'in_top_bar' => true, 'item_type' => 'li', 'menu_type' => 'main-menu' ) ), ) ); ?> </div>
I’m using this on some of my theme you can check them here they have free version as well. Apart from this if any suggestion in your mind about Foundation 6 Responsive Menu please let us know and comment below.
4 Comments
Leave a Reply