Add Foundation Off-Canvas Navigation to Wordpress Genesis Child Theme

custom-toggles.js

/**
* 
* Add Toggle Btns/Dropdowns to Off-Canvas 
*
**/
( function( window, $, undefined ) {
'use strict';

    // Sub-Menu toggle btn
    $( 'nav.nav-secondary li .sub-menu' ).before( '<button class="sub-toggle" role="button" aria-pressed="false"></button>' );

    $( '.sub-toggle' ).on( 'click', function() { // Toggle Nav
        var $this = $( this );
        
            $this.attr( 'aria-pressed', function( index, value ) {
                return 'false' === value ? 'true' : 'false';
            });
        
        $this.toggleClass( 'activate' ); // Add activate class
        $this.next( 'nav.nav-secondary .sub-menu' ).slideToggle( 'medium' ); // set toggle dropdown speed
    
    });
    
})( this, jQuery );

Foundation5-Off-Canvas-Wordpress-Genesis.php

/**
*
* Off-Canvas Navigation required Open & Close Wraps
*
**/

// OPEN Off Canvas Wraps
add_action('genesis_before_header', 'custom_do_open_off_canvas_wraps', 9); 
function custom_do_open_off_canvas_wraps() { ?>

  <div class="off-canvas-wrap" data-offcanvas><!-- data-offcanvas required -->
    <div class="inner-wrap">

<?php 
}

// CLOSE Off Canvas Wraps
add_action('genesis_after_footer', 'custom_do_close_off_canvas_wraps'); 
function custom_do_close_off_canvas_wraps() { ?>
    
    </div>
  </div>

<?php
}

// ADD exit-off-canvas overlay after footer
add_action('genesis_after_footer', 'custom_do_close_off_canvas_overlay', 1); 
function custom_do_close_off_canvas_overlay() { ?>

  <a class="exit-off-canvas"></a>

<?php
}

/**
*
* Do Off-Canvas Navigation
*
**/
add_action('genesis_after_header', 'custom_do_off_canvas');
function custom_do_off_canvas() { ?>

  <nav class="nav-secondary left-off-canvas-menu start" itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">

    <?php
    $options = array(
      'theme_location' => 'secondary',
      'container' => false,
      'depth' => 99,
      'items_wrap' => '<ul id="%1$s" class="off-canvas-list %2$s">%3$s</ul>', // Right or left for nav alignment
      'walker' => new walker_secondary_nav_menu()
    );
    wp_nav_menu($options); 
    ?>

  </nav>

<?php
}

/**
*
* Add '<ul class="sub-menu off-canvas-list off-canvas-submenu">' submenus using a walker
*
**/
class walker_secondary_nav_menu extends Walker_Nav_Menu {
 
    // add classes to ul sub-menus
    function start_lvl(&$output, $depth) {
    
    // depth dependent classes
    $indent = ( $depth > 0 ? str_repeat("\t", $depth) : '' );
    
    // build html
    $output .= "\n" . $indent . '<ul class="sub-menu off-canvas-list off-canvas-submenu">' . "\n";
    // Submenu Toggle Btns added in javascript file
    
  }
}

Info.txt

Adding the Foundation5 Off-Canvas to Wordpress using a Genesis Child Theme
 
  Remember to add/use the correct Foundation style and javascript files:
    
    > Javascript
      - jquery.js
      - custom-toggles.js (included in gist)
      - foundation.js
      - foundation.offcanvas.js
      - Reinitialize: $(document).foundation();
      
    > SCSS
      - .toggles.scss (included in gist)
      - @import "foundation/settings";
      - @import "foundation/components/offcanvas";

Off-Canvas-Settings.js

// // Off-Canvas Example Settings - http://foundation.zurb.com/docs/components/offcanvas.html

$(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'move', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});

toggles.scss

	/* -------------------------------------
		Toggle Navigation Styles
	------------------------------------- */
	.off-canvas-submenu-call {position:relative;}
  	    
	    /* Submenus - toggled on click
        ---------------------------------------- */
	    ul.sub-menu {display: none;} 
              
        /* Child ul sub-toggle button
        ---------------------------------------- */
        button.sub-toggle {position: absolute;top:0;right:0;background:rgba(79,89,99,.3);outline: none;border:none;display: block;font-size:1.7rem;font-weight: 600;    margin: 0 auto !important;text-align: center;padding: 0;width:4.5rem;height: 3.15rem;} /* Padding set to stop button puch down effect */
        button.sub-toggle:before {content:"+";color:rgba(255, 255, 255,.7);}
        button.sub-toggle.activate:before {content:"×";color:$secondary-color;}
     
        /* Hide grandchild ul toggles unless wanted
        -------------------------------------------- */
    		.sub-menu button.sub-toggle {display: none;}
		
        /* Show grandchildren submenu by default
        -------------------------------------------- */
    		.sub-menu .sub-menu {display: block!important;}

	/* ----------------------------------------------------------------------------------------------
		Reverse icons when child or grandchild page is active and submenus are open by default 
	----------------------------------------------------------------------------------------------- */
	nav.nav-secondary {

		/* Child or grandchild page is current, icon on top link is reversed (x)
		------------------------------------------------------------------------ */
		li.current_page_ancestor button.sub-toggle:before {content:"×";}
		li.current_page_ancestor button.sub-toggle.activate:before {content:"+";}

	}