响应式导航

JavaScript

我们的三种菜单模式像战神金刚一样组合成一个响应式菜单插件，允许您在不同的屏幕尺寸下切换模式。

菜单内置了一些响应式 CSS 类，允许您在不同的屏幕尺寸下重新定位菜单。

<ul class="vertical medium-horizontal menu">
  <li><a href="#0"><i class="fi-list"></i> <span>One</span></a></li>
  <li><a href="#0"><i class="fi-list"></i> <span>Two</span></a></li>
  <li><a href="#0"><i class="fi-list"></i> <span>Three</span></a></li>
  <li><a href="#0"><i class="fi-list"></i> <span>Four</span></a></li>
</ul>

菜单可以用三种不同的插件来增强 - 下拉菜单、下拉菜单或手风琴菜单。但是，这些模式往往在特定的屏幕尺寸下效果最佳。

使用我们的响应式菜单插件，您可以对菜单应用默认模式，然后在其他屏幕尺寸下更改该模式。

一些菜单组合（但不限于）是

下拉下拉菜单
手风琴下拉菜单
下拉手风琴菜单

下拉菜单在移动设备上效果很好，但在更大的屏幕上，您可能希望将相同的菜单转换为下拉菜单。下面是一个例子

在视频中观看此部分

<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

错误（v6.3.1）： 下拉下拉菜单组合中存在一个错误。如果您设置了一个响应式菜单，在小屏幕上使用下拉菜单，然后在中等屏幕及以上使用下拉菜单，并将大小调整为小屏幕，然后再回到中等屏幕，则下拉菜单将无法工作。该错误可以此处重现。
好消息： 该错误将在即将发布的 Foundation 版本中修复。如果您正在使用v6.3.1，我们建议使用以下补丁来修复此问题。

// Patch for a Bug in v6.3.1
$(window).on('changed.zf.mediaquery', function() {
  $('.is-dropdown-submenu.invisible').removeClass('invisible');
});

与下拉菜单类似，手风琴菜单在移动设备上效果很好，但在更大的屏幕上，您可能希望将相同的菜单转换为下拉菜单。下面是一个相同的例子

<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

就像 Foundation 文档本身一样（参见左侧导航栏），手风琴菜单非常适合桌面网站的侧边导航栏，但对于移动设备，您可能需要下拉菜单。

<ul class="vertical menu" data-responsive-menu="drilldown medium-accordion" style="max-width: 250px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

响应式切换

在 Foundation 5 中，顶部栏将此菜单切换概念合并到一个插件中。我们现在有一个独立的、可选的组件，您可以与响应式插件一起使用。它被称为标题栏，它允许您在移动设备上快速设置菜单切换。标题栏在更大的屏幕上会隐藏起来。

要进行设置，首先为您的菜单指定一个唯一的 ID。（您甚至不需要使用菜单！任何元素都可以。）接下来，添加一个带有 .title-bar 类和 data-responsive-toggle 属性的标题栏。data-responsive-toggle 的值应该是您要切换的菜单的 ID。最后，将 data-toggle 添加到将触发切换的元素。data-toggle 的值也应该是您要切换的菜单的 ID。

默认情况下，标题栏在小屏幕上可见，而菜单隐藏。在中等断点处，标题栏消失，菜单始终可见。可以使用 HTML 中的 data-hide-for 属性或 JavaScript 中的 hideFor 设置来更改此断点。

在视频中观看此部分

缩小浏览器窗口以查看切换效果。

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="example-menu"></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-dropdown-menu>
      <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>

菜单

带动画的响应式切换

要使用 Motion UI 库中的动画，请包含 data-animate="someAnimationIn someAnimationOut" 属性。

缩小浏览器窗口以查看切换效果。

<div class="title-bar" data-responsive-toggle="example-animated-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-animated-menu" data-animate="hinge-in-from-top spin-out">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <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>

菜单

防止 FOUC

在页面上的 JavaScript 加载之前，您将能够同时看到移动设备和桌面元素一秒钟。这被称为无样式内容闪烁。框架无法为您轻松处理这个问题，但您可以添加一些额外的 CSS 来解决这个问题。

如果我们参考上面的例子，.title-bar 是我们的移动元素，.top-bar 是我们的桌面元素。所以在 JavaScript 加载之前，我们希望只显示适合该屏幕尺寸的正确元素。

.no-js .top-bar {
  display: none;
}

@media screen and (min-width: 40em) {
  .no-js .top-bar {
    display: block;
  }

  .no-js .title-bar {
    display: none;
  }
}

如果您使用的是 Sass，可以这样写

.no-js {
  @include breakpoint(small only) {
    .top-bar {
      display: none;
    }
  }

  @include breakpoint(medium) {
    .title-bar {
      display: none;
    }
  }
}

JavaScript 参考

初始化

要使用此插件，必须在 JavaScript 中包含以下文件

foundation.core.js
foundation.responsiveMenu.js
- 使用实用程序库 foundation.util.triggers.js
- 使用实用程序库 foundation.util.mediaQuery.js
foundation.responsiveToggle.js
- 使用实用程序库 foundation.util.mediaQuery.js
- 使用实用程序库 foundation.util.motion.js

Foundation.ResponsiveMenu

创建一个新的响应式菜单实例。

var elem = new Foundation.ResponsiveMenu(element, options);

触发以下事件： ResponsiveMenu#event:init

名称	类型	描述
`element`	jQuery	要转换为下拉菜单的 jQuery 对象。
`options`	对象	覆盖默认插件设置。

Foundation.ResponsiveToggle

创建一个新的选项卡栏实例。

var elem = new Foundation.ResponsiveToggle(element, options);

触发以下事件： ResponsiveToggle#event:init

名称	类型	描述
`element`	jQuery	要附加选项卡栏功能的 jQuery 对象。
`options`	对象	覆盖默认插件设置。

插件选项

使用这些选项来自定义响应式导航的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性，或者作为传递给插件构造函数的对象。了解更多关于如何初始化 JavaScript 插件的信息。

名称	类型	默认值	描述
`data-hide-for`	`字符串`	`medium`	在此断点之后，菜单始终显示，选项卡栏隐藏。
`data-animate`	`布尔值`	`false`	决定切换是否应该动画。

事件

这些事件将从附加了响应式导航插件的任何元素中触发。

名称	描述
`toggled.zf.responsiveToggle`	当附加到选项卡栏的元素切换时触发。

方法

_destroy

$('#element').foundation('_destroy');

销毁此元素上当前插件的实例，以及切换插件的窗口大小调整处理程序。

toggleMenu

$('#element').foundation('toggleMenu');

切换附加到选项卡栏的元素。只有当屏幕足够小时，才会发生切换。

触发以下事件： ResponsiveToggle#event:toggled

响应式菜单

下拉下拉菜单

手风琴下拉菜单

下拉手风琴菜单

响应式切换

带动画的响应式切换

防止 FOUC

JavaScript 参考

初始化

Foundation.ResponsiveMenu

Foundation.ResponsiveToggle

插件选项

事件

方法

_destroy

toggleMenu