4

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

Foundation 文档中的最后一个示例在中等或较大视图中按预期工作，但仍然在小视图中显示水平菜单！

基本上，我如何让菜单表现得像旧的 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>
4

1 回答 1

3

dropdown从 中删除类并将<ul>类添加到列表中，如下所示：verticalmedium-horizontal

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

更新： 响应式菜单中与下拉箭头和子菜单折叠方向相关的错误已在foundation-sites 6.2.0.

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

于 2016-01-29T22:29:18.050 回答