Off canavs multi level

[jw86]

Is it possible to display sub menu items in the mobile menu using the multi level feature?

[olefredrik]

As of now, this is not supported. I've considered adding support for multi-level in the off-canvas menu, but it has been postponed due to lack of time.

[Tralapo]

This actually isn't that hard to fix, @jw86 . You have to change the /library/navigation.php first. Find the third walker in that file, the one that says "Mobile off-canvas" as title.

Change line 76 'walker' to this:

'walker' => new FoundationPress_offcanvas_walker()

After you've done that, copy the 'menu-walker.php' en rename it to 'offcanvas-walker.php' Then change it to this:

<?php
/**
 * Customize the output of menus for Foundation off-canvas with multi-level 
 */
if (!class_exists('FoundationPress_offcanvas_walker')) :
class FoundationPress_offcanvas_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 && $max_depth !== 1 ) ? 'has-submenu' : '';

        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

    function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
        $item_html = '';
        parent::start_el( $item_html, $object, $depth, $args ); 

        $output .= ( $depth == 0 ) ? '<li class="divider"></li>' : '';

        $classes = empty( $object->classes ) ? array() : (array) $object->classes;  

        if( in_array('label', $classes) ) {
            $output .= '<li class="divider"></li>';
            $item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
        }

    if ( in_array('divider', $classes) ) {
        $item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
    }

        $output .= $item_html;
    }

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $output .= "\n<ul class=\"left-submenu\">\n<li class=\"back\"><a href=\"#\">Back</a></li>\n";
    }

}
endif;
?>

Now, the last step is 'functions.php'. We have to add a line there. First, find the line that says:

require_once('library/menu-walker.php');

Add your new walker under that line:

require_once('library/offcanvas-walker.php');

That's it, the off-canvas menu for FoundationPress is now multi-level. I found this out for myself and it works fine, but @olefredrik, please correct me if you think it's wrong.

[theodorocaliari]

@Tralapo, thanks a lot! it works!

[adaptifyDesigns]

@Tralapo, thanks a bunch for your offcanvas-walker! Very helpful.

In the start_lvl function where you configure the ...-submenu and .back elements which prefix each sub-navigation level, is there anyway to access the parent object for that sub-level? I'd like to add the parent link as a label preceding the list of links.

Also, in the start_el function, I can see there is some sort of logic for outputting the label element, e.g. if( in_array('label', $classes) ) { ..., but I don't quite understand it. Is that function creating the ability to add labels to the off-canvas-lists? If so, how does it work?

Thank you in advance for any assistance.

[Tralapo]

@adaptifyDesigns Nice to hear it works. To be honest: I don't understand the walker very well either.

I looked for the classes that had to be changed and changed them. I do like your suggestion with that label. So maybe someone else can help us here.

[Tralapo]

One other thing, @olefredrik and others: In the standard walker (and the off-canvas walker I posted above), <li class="divider"></li> is included. But the off-canvas doesn't need and doesn't do anything with a divider (see Foundation docs). So these can (and should) be removed in a new version? They don't do any harm either, but nicer to take them away. I will do a pull Request for my off-canvas walker, with the dividers removed.

And @adaptifyDesigns I just today found out how the 'label' part works (I didn't need it before today, so didn't look at it very good). In library/navigation.php you can find the following comment:

/** 
 * Add support for buttons in the top-bar menu: 
 * 1) In WordPress admin, go to Apperance -> Menus. 
 * 2) Click 'Screen Options' from the top panel and enable 'CSS CLasses' and 'Link Relationship (XFN)'
 * 3) On your menu item, type 'has-form' in the CSS-classes field. Type 'button' in the XFN field
 * 4) Save Menu. Your menu item will now appear as a button in your top-menu
*/

The part about the labels should maybe have been explained in the same way. But if you enable 'CSS Classes' in the Screen Options, you have to add 'label' as class to a menu-item. The walker then automaticly strips that item from <a></a> and adds <label></label>, making it a label. Almost magic.

[adaptifyDesigns]

Wow, awesome! Thanks for the tip! Much appreciated.

[olefredrik]

Merged. #282