Toggle menu - animate height - zurb-foundation

Question

How to make a dropdown .top-bar? Foundation hides it by display: none; and i can't use transition height.
Below header structure
<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="large">
<div class="toggle-button"><button class="menu-icon" type="button" data-toggle></button></div>
<div class="title-bar-title show-for-sr" >Menu</div>
</div>
<nav class="top-bar navigation" id="example-animated-menu">
<div class="dropdown menu navigation-list" data-dropdown-menu >
<ul id="menu-menu " class="menu algin-right vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
</ul>
</div>
<form class="search">
<div class="grid-x grid-padding-x">
<div class="small-9 cell">
<input type="text" id="middle-label" placeholder="Search">
</div>
<div class="small-3 cell">
<label for="middle-label" class="text-left middle"><img src="img/ico-search.png" alt="#" /></label>
</div>
</div>
</form>
</nav>

Answer 1

You can display the .top-bar as a child of .dropdown-pane and then override the display: none; with display: block.
Then simply add a max-height transition to the .top-bar going from 0 to the height of your choice.
HTML:
<div class="dropdown-pane"
id="example-animated-menu"
data-dropdown
data-position="bottom"
data-alignment="bottom"
data-v-offset="40px">
<nav class="top-bar navigation" ></nav>
</div>
CSS:
.dropdown-pane {
width: 100%;
padding: 0;
display: block;
max-height: 0;
-webkit-transition: all 0.11s ease;
transition: all 0.11s ease;
}
.top-bar {
max-height: 0;
overflow: hidden;
}
.is-open .top-bar {
max-height: 76px;
-webkit-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
overflow: hidden;
}
See a JSFiddle demo