Menu icon Foundation
top-bar walker menu dropdown slideing problem?

Hi

Got a bit of problem. Am hoping its easy to fix.

I am using Foundation 5, Foundationpress and Grunt.

I got the menu working but the sub menu when clicked slides from the right. all i was after was the defualt hover and it drops down.

I added "has-form button" to CSS Classes (optional), through appearance > menu's in Wordpress. I tryed what it said in navigation.php but it didnt add the button class.

Do you get different types of dropdowns that can be applied easily to walker menu? How can I find out more info. Is there an IRC channel for Foundationpress?

Do you need to see the variables? have not change much there.

//html from top-bar.php
<div class="top-bar-container contain-to-grid show-for-medium-up">
    <nav class="top-bar" data-topbar role="navigation">
         <section class="top-bar-section">

            <?php foundationPress_top_bar_l(); ?>
            <?php foundationPress_top_bar_r(); ?>
        </section>
    </nav>
</div>

// stuff from navigation.php - i only changed the menu_class
<?php

/**
 * Register Menus
 * http://codex.wordpress.org/Function_Reference/register_nav_menus#Examples
 */
register_nav_menus(array(
    'top-bar-l' => 'Left Top Bar', // registers the menu in the WordPress admin menu editor
    'top-bar-r' => 'Right Top Bar',
        'top-bar-c' => 'centre Top Bar',
    'mobile-off-canvas' => 'Mobile',
));


/**
 * Left top bar
 * http://codex.wordpress.org/Function_Reference/wp_nav_menu
 */
function foundationPress_top_bar_c() {
    wp_nav_menu(array( 
        'container' => false,                           // remove nav container
        'container_class' => '',                        // class of container
        'menu' => '',                                   // menu name
        'menu_class' => 'top-bar-menu center clearfix',            // adding custom nav class
        'theme_location' => 'top-bar-c',                // where it's located in the theme
        'before' => '',                                 // before each link <a> 
        'after' => '',                                  // after each link </a>
        'link_before' => '',                            // before each link text
        'link_after' => '',                             // after each link text
        'depth' => 5,                                   // limit the depth of the nav
        'fallback_cb' => false,                         // fallback function (see below)
        'walker' => new top_bar_walker()
    ));
}
if ( ! function_exists( 'foundationPress_top_bar_l' ) ) {
    function foundationPress_top_bar_l() {
	    wp_nav_menu(array( 
	        'container' => false,                           // remove nav container
	        'container_class' => 'balls',                        // class of container
	        'menu' => '',                                   // menu name
	        'menu_class' => 'top-bar-menu left clearfix',            // adding custom nav class
	        'theme_location' => 'top-bar-l',                // where it's located in the theme
	        'before' => '',                                 // before each link <a> 
	        'after' => '',                                  // after each link </a>
	        'link_before' => '',                            // before each link text
	        'link_after' => '',                             // after each link text
	        'depth' => 5,                                   // limit the depth of the nav
	        'fallback_cb' => false,                         // fallback function (see below)
	        'walker' => new top_bar_walker()
	    ));
	}
}

/**
 * Right top bar
 */
if ( ! function_exists( 'foundationPress_top_bar_r' ) ) {
	function foundationPress_top_bar_r() {
	    wp_nav_menu(array( 
	        'container' => false,                           // remove nav container
	        'container_class' => '',                        // class of container
	        'menu' => '',                                   // menu name
	        'menu_class' => 'top-bar-menu right',           // adding custom nav class
	        'theme_location' => 'top-bar-r',                // where it's located in the theme
	        'before' => '',                                 // before each link <a> 
	        'after' => '',                                  // after each link </a>
	        'link_before' => '',                            // before each link text
	        'link_after' => '',                             // after each link text
	        'depth' => 5,                                   // limit the depth of the nav
	        'fallback_cb' => false,                         // fallback function (see below)
	        'walker' => new top_bar_walker()
	    ));
	}
}

/**
 * Mobile off-canvas
 */
if ( ! function_exists( 'foundationPress_mobile_off_canvas' ) ) {
	function foundationPress_mobile_off_canvas() {
	    wp_nav_menu(array( 
	        'container' => false,                           // remove nav container
	        'container_class' => '',                        // class of container
	        'menu' => '',                                   // menu name
	        'menu_class' => 'off-canvas-list',              // adding custom nav class
	        'theme_location' => 'mobile-off-canvas',        // where it's located in the theme
	        'before' => '',                                 // before each link <a> 
	        'after' => '',                                  // after each link </a>
	        'link_before' => '',                            // before each link text
	        'link_after' => '',                             // after each link text
	        'depth' => 5,                                   // limit the depth of the nav
	        'fallback_cb' => false,                         // fallback function (see below)
	        'walker' => new top_bar_walker()
	    ));
	}
}

/** 
 * 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
*/
if ( ! function_exists( 'add_menuclass') ) {
	function add_menuclass($ulclass) {
	    $find = array('/<a rel="button"/', '/<a title=".*?" rel="button"/');
	    $replace = array('<a rel="button" class="button"', '<a rel="button" class="button"');
	    
	    return preg_replace($find, $replace, $ulclass, 1);
	}
	add_filter('wp_nav_menu','add_menuclass');
}



?>


// css stuff 
.top-bar {
    border-bottom-color: $redline;
	border-bottom-style: solid;
	border-bottom-width:  rem-calc(1);
	.has-dropdown{
		float: left;
	}
	.button {
		display: block;
		float: left;
		padding:rem-calc(0);
	}
	a{
		padding:rem-calc(12) !important;
	}
	li {
		display: inline;
		position: relative;
		border-right-color: $redline;
		border-right-style: solid;
		border-right-width:  rem-calc(1);
	}
}
            

         

Menu

Walkerwordpressdropdown menufoundationPressslide

Hi

Got a bit of problem. Am hoping its easy to fix.

I am using Foundation 5, Foundationpress and Grunt.

I got the menu working but the sub menu when clicked slides from the right. all i was after was the defualt hover and it drops down.

I added "has-form button" to CSS Classes (optional), through appearance > menu's in Wordpress. I tryed what it said in navigation.php but it didnt add the button class.

Do you get different types of dropdowns that can be applied easily to walker menu? How can I find out more info. Is there an IRC channel for Foundationpress?

Do you need to see the variables? have not change much there.

//html from top-bar.php
<div class="top-bar-container contain-to-grid show-for-medium-up">
    <nav class="top-bar" data-topbar role="navigation">
         <section class="top-bar-section">

            <?php foundationPress_top_bar_l(); ?>
            <?php foundationPress_top_bar_r(); ?>
        </section>
    </nav>
</div>

// stuff from navigation.php - i only changed the menu_class
<?php

/**
 * Register Menus
 * http://codex.wordpress.org/Function_Reference/register_nav_menus#Examples
 */
register_nav_menus(array(
    'top-bar-l' => 'Left Top Bar', // registers the menu in the WordPress admin menu editor
    'top-bar-r' => 'Right Top Bar',
        'top-bar-c' => 'centre Top Bar',
    'mobile-off-canvas' => 'Mobile',
));


/**
 * Left top bar
 * http://codex.wordpress.org/Function_Reference/wp_nav_menu
 */
function foundationPress_top_bar_c() {
    wp_nav_menu(array( 
        'container' => false,                           // remove nav container
        'container_class' => '',                        // class of container
        'menu' => '',                                   // menu name
        'menu_class' => 'top-bar-menu center clearfix',            // adding custom nav class
        'theme_location' => 'top-bar-c',                // where it's located in the theme
        'before' => '',                                 // before each link <a> 
        'after' => '',                                  // after each link </a>
        'link_before' => '',                            // before each link text
        'link_after' => '',                             // after each link text
        'depth' => 5,                                   // limit the depth of the nav
        'fallback_cb' => false,                         // fallback function (see below)
        'walker' => new top_bar_walker()
    ));
}
if ( ! function_exists( 'foundationPress_top_bar_l' ) ) {
    function foundationPress_top_bar_l() {
	    wp_nav_menu(array( 
	        'container' => false,                           // remove nav container
	        'container_class' => 'balls',                        // class of container
	        'menu' => '',                                   // menu name
	        'menu_class' => 'top-bar-menu left clearfix',            // adding custom nav class
	        'theme_location' => 'top-bar-l',                // where it's located in the theme
	        'before' => '',                                 // before each link <a> 
	        'after' => '',                                  // after each link </a>
	        'link_before' => '',                            // before each link text
	        'link_after' => '',                             // after each link text
	        'depth' => 5,                                   // limit the depth of the nav
	        'fallback_cb' => false,                         // fallback function (see below)
	        'walker' => new top_bar_walker()
	    ));
	}
}

/**
 * Right top bar
 */
if ( ! function_exists( 'foundationPress_top_bar_r' ) ) {
	function foundationPress_top_bar_r() {
	    wp_nav_menu(array( 
	        'container' => false,                           // remove nav container
	        'container_class' => '',                        // class of container
	        'menu' => '',                                   // menu name
	        'menu_class' => 'top-bar-menu right',           // adding custom nav class
	        'theme_location' => 'top-bar-r',                // where it's located in the theme
	        'before' => '',                                 // before each link <a> 
	        'after' => '',                                  // after each link </a>
	        'link_before' => '',                            // before each link text
	        'link_after' => '',                             // after each link text
	        'depth' => 5,                                   // limit the depth of the nav
	        'fallback_cb' => false,                         // fallback function (see below)
	        'walker' => new top_bar_walker()
	    ));
	}
}

/**
 * Mobile off-canvas
 */
if ( ! function_exists( 'foundationPress_mobile_off_canvas' ) ) {
	function foundationPress_mobile_off_canvas() {
	    wp_nav_menu(array( 
	        'container' => false,                           // remove nav container
	        'container_class' => '',                        // class of container
	        'menu' => '',                                   // menu name
	        'menu_class' => 'off-canvas-list',              // adding custom nav class
	        'theme_location' => 'mobile-off-canvas',        // where it's located in the theme
	        'before' => '',                                 // before each link <a> 
	        'after' => '',                                  // after each link </a>
	        'link_before' => '',                            // before each link text
	        'link_after' => '',                             // after each link text
	        'depth' => 5,                                   // limit the depth of the nav
	        'fallback_cb' => false,                         // fallback function (see below)
	        'walker' => new top_bar_walker()
	    ));
	}
}

/** 
 * 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
*/
if ( ! function_exists( 'add_menuclass') ) {
	function add_menuclass($ulclass) {
	    $find = array('/<a rel="button"/', '/<a title=".*?" rel="button"/');
	    $replace = array('<a rel="button" class="button"', '<a rel="button" class="button"');
	    
	    return preg_replace($find, $replace, $ulclass, 1);
	}
	add_filter('wp_nav_menu','add_menuclass');
}



?>


// css stuff 
.top-bar {
    border-bottom-color: $redline;
	border-bottom-style: solid;
	border-bottom-width:  rem-calc(1);
	.has-dropdown{
		float: left;
	}
	.button {
		display: block;
		float: left;
		padding:rem-calc(0);
	}
	a{
		padding:rem-calc(12) !important;
	}
	li {
		display: inline;
		position: relative;
		border-right-color: $redline;
		border-right-style: solid;
		border-right-width:  rem-calc(1);
	}
}
            

         

Menu