Question

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

Foundation documentation中的最后一个示例在中型或大型视图中按预期工作，但仍然在小视图中显示了水平菜单!!

基本上，如何使菜单的行为与旧的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">

更新：在 foundation-sites 6.2.0 bugs >

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

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

1 个答案: