Menu icon Foundation

Engineer | Torrance, CA

Senior WordPress Software Developer in Los Angeles, CA

My Posts

No Content

My Comments

Courtney Ivey commented on Arne Sneyers's post almost 5 years

I think one of the best threads that references the changes you need to make to the *.css files, in order to change the breakpoint from small to medium is here:

http://foundation.zurb.com/forum/posts/1053-changing-topbar-breakpoint-using-css

Courtney Ivey commented on JapperCat's post almost 5 years

Hey there...

In the top bar menu under the first dropdown, there are a few links to case studies and website examples that might be helpful.

Learn > Case Studies: http://foundation.zurb.com/learn/case-jacquelinewest.html
Learn > Website Examples: http://foundation.zurb.com/learn/website-examples.html

There's also another page that lists sites that are "Built with Foundation":
http://zurb.com/responsive

Also, PatternTap is a great resource for some awesome functionality that is in use on quite a few Foundation sites.

http://patterntap.com/code

Courtney Ivey commented on Andrew Brown's post over 5 years

Here's a Walker that we use that works pretty good with Foundation 5 so far...

Hope this helps!

/**
 * Top Bar Walker
 *
 * @since 1.0.0
 */
class Top_Bar_Walker extends Walker_Nav_Menu {
  /**
    * @see Walker_Nav_Menu::start_lvl()
   * @since 1.0.0
   *
   * @param string $output Passed by reference. Used to append additional content.
   * @param int $depth Depth of page. Used for padding.
  */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $output .= "\n<ul class=\"sub-menu dropdown\">\n";
    }

    /**
     * @see Walker_Nav_Menu::start_el()
     * @since 1.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item Menu item data object.
     * @param int $depth Depth of menu item. Used for padding.
     * @param object $args
     */

    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) ) {
            $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;
    }

  /**
     * @see Walker::display_element()
     * @since 1.0.0
   * 
   * @param object $element Data object
   * @param array $children_elements List of elements to continue traversing.
   * @param int $max_depth Max depth to traverse.
   * @param int $depth Depth of current element.
   * @param array $args
   * @param string $output Passed by reference. Used to append additional content.
   * @return null Null on failure with no changes to parameters.
   */
    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 ) ? 'has-dropdown' : '';

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

}

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Arne Sneyers's post almost 5 years

I think one of the best threads that references the changes you need to make to the *.css files, in order to change the breakpoint from small to medium is here:

http://foundation.zurb.com/forum/posts/1053-changing-topbar-breakpoint-using-css

You commented on JapperCat's post almost 5 years

Hey there...

In the top bar menu under the first dropdown, there are a few links to case studies and website examples that might be helpful.

Learn > Case Studies: http://foundation.zurb.com/learn/case-jacquelinewest.html
Learn > Website Examples: http://foundation.zurb.com/learn/website-examples.html

There's also another page that lists sites that are "Built with Foundation":
http://zurb.com/responsive

Also, PatternTap is a great resource for some awesome functionality that is in use on quite a few Foundation sites.

http://patterntap.com/code

You commented on Andrew Brown's post over 5 years

Here's a Walker that we use that works pretty good with Foundation 5 so far...

Hope this helps!

/**
 * Top Bar Walker
 *
 * @since 1.0.0
 */
class Top_Bar_Walker extends Walker_Nav_Menu {
  /**
    * @see Walker_Nav_Menu::start_lvl()
   * @since 1.0.0
   *
   * @param string $output Passed by reference. Used to append additional content.
   * @param int $depth Depth of page. Used for padding.
  */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $output .= "\n<ul class=\"sub-menu dropdown\">\n";
    }

    /**
     * @see Walker_Nav_Menu::start_el()
     * @since 1.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item Menu item data object.
     * @param int $depth Depth of menu item. Used for padding.
     * @param object $args
     */

    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) ) {
            $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;
    }

  /**
     * @see Walker::display_element()
     * @since 1.0.0
   * 
   * @param object $element Data object
   * @param array $children_elements List of elements to continue traversing.
   * @param int $max_depth Max depth to traverse.
   * @param int $depth Depth of current element.
   * @param array $args
   * @param string $output Passed by reference. Used to append additional content.
   * @return null Null on failure with no changes to parameters.
   */
    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 ) ? 'has-dropdown' : '';

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

}

Posts Followed

Following

  • No Content

Followers

  • No Content