Zurb foundation 切换菜单-设置高度动画

如何制作下拉列表。顶栏？基础通过显示隐藏：没有；我不能使用过渡高度

标题下结构

        <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><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></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>

菜单

您可以将

顶栏

显示为

下拉窗格

的子项，然后覆盖

显示：无带
显示：块

然后只需将
max height
过渡添加到
顶部栏
，从0过渡到您选择的高度

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>

.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;
}