extend Zurb Foundation 4 TopBar to allow slide animation for mobile viewport #foundationzurb

example-use.scss

#nav {
    @include sliding-nav($nav-item-index:8);  // note - set only one SASS parameter by using named variables syntax

	.top-bar { 
      		// ..
	}
}

local._top_bar.scss

//  ===============================================
//  extends foundation/components/top-bar
//  ===============================================

//  Sliding mobile navigation =====================
//
//  CSS Transitions for height=n -> height=auto have a bug where
//  the height transitions from 100px to 0px, then jumps to ~550px
//  Overcome this by transitioning 'max-height' rather than 'height'
//
//  @source	http://stackoverflow.com/questions/15922076/css3-transition-to-height-auto-goes-to-height-0-first
//  @use 	apply to wrapper class
//
//  1.	a number higher than the expanded menu height, the browser
//      uses this value to calculate transition duration, keep it as
//      small as possible

@mixin sliding-nav($speed:800ms, $nav-item-index:4, $ease:ease) {
	.top-bar {
		max-height: $topbar-height;
		@include transition(max-height $speed $ease);

		&.expanded {
			max-height: $topbar-height * $nav-item-index; 	// 1.
		}
	}
}