zurb-foundation - 如何配置 Foundation 6 响应式菜单以在 Drilldown 和 Dropdown 类型之间切换？

Question

在移动设备 Brealpoint 时，如何配置 Foundation 6 响应式菜单以从下拉菜单切换到钻取菜单？

Foundation documentation中的最后一个例子在中等或较大 View 中按预期工作，但仍以小 View 显示水平菜单!!

基本上，我如何让菜单像旧的 Foundation 5 菜单那样工作？

这个标记几乎有效，向下钻取有点作用，但菜单项仍然水平排列。

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu"  data-responsive-menu="drilldown medium-dropdown" >
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

Answer 1

摆脱dropdown来自 <ul> 的类并添加类 vertical和 medium-horizontal到列表，所以它看起来像这样:

<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

更新 : bugs与响应式菜单中的下拉箭头和子菜单折叠方向相关的问题已在 版本中得到修复。 foundation-sites 6.2.0 .

相关 SO 问题: Foundation 6 data-responsive-menu parameters