屏幕外菜单

JavaScript

屏幕外菜单面板位于视窗外部，并在激活时滑入。在 Foundation 中设置屏幕外菜单布局非常简单。

好消息！我们已经更新了屏幕外菜单，以提供更多更好的功能。另一个好处是标记简化了。此新版本适用于 6.3+ 版本。我们努力避免重大更改，因此任何标记更新都列在迁移部分本页。

Foundation 的屏幕外菜单是一种完善的移动导航模式，也可用于创建响应式侧边栏。它可以从任何方向打开，左、右、上和下。有一些选项可以允许屏幕外菜单将您的页面推开或与您的页面重叠，以及其他一些巧妙的技巧。

设置

设置屏幕外菜单只需要两个元素！要设置屏幕外菜单，请创建一个带有类 .off-canvas 和属性 data-off-canvas 的屏幕外菜单容器。这是包含您的屏幕外菜单内容的容器。

屏幕外菜单容器还需要一个定位类来确定它从视窗的哪一侧打开

.position-left
.position-right
.position-top
.position-bottom

在视频中观看此部分

还要确保屏幕外菜单面板具有唯一的 ID，以便点击触发器可以定位它。

示例

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <!-- Your menu or Off-canvas content goes here -->
</div>

除了屏幕外菜单容器之外，页面的主要内容将包含在其自己的容器中，该容器具有类 .off-canvas-content 和属性 data-off-canvas-content。这就是您的页面内容所在的位置。

<div class="off-canvas-content" data-off-canvas-content>
  <!-- Your page content lives here -->
</div>

所以把它们放在一起

<body>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <!-- Your menu or Off-canvas content goes here -->
  </div>
  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
  </div>
</body>

包装器

您可以在屏幕外菜单和内容周围添加一个可选的包装器。这会隐藏正文将具有的垂直（顶部/底部屏幕外菜单）或水平（左侧/右侧屏幕外菜单）滚动条。只需添加一个带有类 .off-canvas-wrapper 的容器。

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Your page content lives here -->
    </div>
  </div>
</body>

点击触发器

要创建打开面板的点击触发器，请将属性 data-open 或 data-toggle 添加到任何元素。然后，该元素将在单击时打开或切换面板。数据属性的值应该是屏幕外菜单的 ID。

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>

关闭按钮

Foundation 的关闭组件可以在屏幕外菜单内部使用以关闭它。

<button class="close-button" aria-label="Close menu" type="button" data-close>
  <span aria-hidden="true">&times;</span>
</button>

完整示例

这是一个完整的示例，可以粘贴到页面的 <body> 标签中。它包括一个关闭按钮和基本的菜单样式。

<body>
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

    <!-- Close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
  </div>
</body>

屏幕外菜单位置

默认情况下，Foundation 的屏幕外菜单使用 .off-canvas 类设置为 position: fixed。这使得屏幕外菜单面板相对于视窗放置，并且是大多数用户期望的行为。但是，您也可以使用替代类 .off-canvas-absolute 将屏幕外菜单容器设置为 position: absolute。在使用此方法时，请务必使用 .off-canvas-wrapper。

<button type="button" class="button" data-toggle="offCanvasLeftSplit1">Open Left</button>
<button type="button" class="button" data-toggle="offCanvasRightSplit2">Open Right</button>

<div class="grid-x grid-margin-x">
  <div class="cell small-6">
    <div class="off-canvas-wrapper">
      <div class="off-canvas-absolute position-left" id="offCanvasLeftSplit1" data-off-canvas>
        <!-- Your menu or Off-canvas content goes here -->
      </div>
      <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content>
        <p>I have nothing to do with the off-canvas on the right!</p>
      </div>
    </div>
  </div>
  <div class="cell small-6">
    <div class="off-canvas-wrapper">
      <div class="off-canvas-absolute position-right" id="offCanvasRightSplit2" data-off-canvas>
        <!-- Your menu or Off-canvas content goes here -->
      </div>
      <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content>
        <p>Im a unique off-canvas container all on my own!</p>
      </div>
    </div>
  </div>
</div>

我与右边的屏幕外菜单无关！

我是一个独立的屏幕外菜单容器！

屏幕外菜单方向

Foundation 的屏幕外菜单可以从任何方向打开，左、右、上和下。

屏幕外菜单容器需要一个定位类来确定它从视窗的哪一侧打开

.position-left
.position-right
.position-top
.position-bottom

<button type="button" class="button" data-toggle="offCanvasLeft1">Open Left</button>
<button type="button" class="button" data-toggle="offCanvasRight1">Open Right</button>
<button type="button" class="button" data-toggle="offCanvasTop1">Open Top</button>
<button type="button" class="button" data-toggle="offCanvasBottom1">Open Bottom</button>

<div class="cell">
  <div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvasLeft1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-right" id="offCanvasRight1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-top" id="offCanvasTop1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas position-bottom" id="offCanvasBottom1" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <img src="https://placehold.it/300x300" class="" height="" width="" alt="">
    </div>
  </div>
</div>

多个面板

一个设计可以有多个面板。请确保所有面板都位于 .off-canvas-content 包装器*之前*——这是 CSS 正确应用所必需的。

在从右到左模式下使用 Foundation 时，“右”仍然表示右，“左”仍然表示左。

<body>
  <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas></div>
  <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas></div>
  <div class="off-canvas-content" data-off-canvas-content></div>
</body>

屏幕外菜单过渡

您可以通过将 data-transition="overlap" 添加到 .off-canvas 来切换屏幕外菜单的默认过渡，从在打开时推动页面到与页面重叠。有 2 种可用的过渡：push (data-transition="push") 是默认的，以及 overlap (data-transition="overlap")。

当将屏幕外菜单放置在屏幕外菜单内容容器中作为嵌套屏幕外菜单时，只能进行重叠过渡。如果您已明确定义了 push 过渡，它将自动替换为 overlap。

<div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
  <!-- Your menu or Off-canvas content goes here -->
</div>
<div class="off-canvas position-right" id="offCanvasRightPush" data-off-canvas data-transition="push">
  <!-- Your menu or Off-canvas content goes here -->
</div>

在大屏幕上显示

左侧和右侧屏幕外菜单窗格可以设置为在大屏幕上持久显示，如侧边栏。将类 .reveal-for-medium 或 .reveal-for-large 添加到屏幕外菜单。这些类确定屏幕外菜单默认打开的断点。

主内容区域 (.off-canvas-content) 将向左或向右填充，等于容器的宽度。

默认情况下，菜单将是固定位置的，这意味着它会在您上下滚动时跟随您。如果菜单比窗口高，它也会获得自己的滚动条。要禁用这些功能，请将 $offcanvas-fixed-reveal 变量设置为 false。

当这些类处于活动状态时，插件的滑入/滑出仍然有效。如果您在大屏幕上使用此功能，请务必隐藏那些较大断点上的任何点击触发器。Foundation 的可见性类可以帮助您解决这个问题。

<div class="off-canvas position-left reveal-for-large" data-off-canvas>
  <!-- ... -->
</div>

与标题栏组合

如果您需要一个简单的栏来包含您的汉堡图标并切换屏幕外菜单，.title-bar 可以帮助您。它支持左对齐和右对齐部分。您可以在此处添加屏幕外菜单切换触发器

<div class="title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
    <span class="title-bar-title">Foundation</span>
  </div>
  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
  </div>
</div>

Foundation

当将 `title-bar` 与垂直屏幕外菜单一起使用时，标题栏图标仍然是 `title-bar-left` 或 `title-bar-right`。

<div class="title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button" data-open="offCanvasTop"></button>
    <span class="title-bar-title">Foundation title bar with top off-canvas</span>
  </div>
  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-open="offCanvasTop"></button>
  </div>
</div>

带有顶部屏幕外菜单的 Foundation 标题栏

屏幕外菜单（整合所有内容）

有关屏幕外菜单的示例，请查看此顶部栏，其中包含屏幕外菜单导航和子菜单下拉菜单构建块：https://foundation.npmjs.net.cn/building-blocks/blocks/multilevel-offcanvas-menu.html

画布内到画布外

使用此功能，您可以使标准页面元素在特定断点处移出屏幕外。为此，请使用 inCanvasOn 选项。画布内与在大屏幕上显示功能不同，因为它实际上并没有针对特定屏幕尺寸打开屏幕外菜单，而是覆盖了屏幕外菜单样式，因此它 behaves as a regular page element. This way you can place an element anywhere on the page and move it into off-canvas for e.g. small screens only.

inCanvasOn 选项将自动添加 .in-canvas-for-[BREAKPOINT] 类，因为大多数工作都是仅通过 CSS 完成的。但是，您也可以自己添加此类，它将覆盖该选项。

<button type="button" class="button hide-for-large" data-toggle="inCanvasExample">
  Open in-canvas that is off-canvas now
</button>
<div class="off-canvas position-right" id="inCanvasExample" data-off-canvas data-options="inCanvasOn:large;">
  <div class="callout">I'm in-canvas for medium screen size and move off-canvas for medium down.</div>
</div>

我在中等屏幕尺寸的画布内，并在中等以下的屏幕尺寸移出画布。

嵌套屏幕外菜单

在 v6.4 中，屏幕外菜单组件已得到大量扩展。除了画布内功能之外，现在还可以将元素嵌套在内容中，而不是仅将其用作同级元素。如果您想对小屏幕使用相同的元素（例如屏幕外菜单）和大屏幕使用通常的页面元素而不重复内容，这将非常方便。

另一个改进是支持共享相同位置的多个屏幕外菜单元素，例如两个具有 position-left 的元素。

高级屏幕外菜单用户可以使用新的 contentId 选项将元素绑定到内容。这使您可以更灵活地放置元素，因为它可能是内容的同级元素、子元素或两者都不是。
**重要提示：**在嵌套元素上使用 contentId 时，您还必须使用新的 nested 选项并告诉 JavaScript 它已嵌套！

请注意，嵌套屏幕外菜单元素不能使用 push 过渡。

<button type="button" class="button" data-toggle="offCanvasNestedPush">
  Open Nested Off-Canvas Push
</button>
<button type="button" class="button" data-toggle="offCanvasNestedOverlap">
  Open Nested Off-Canvas Overlap
</button>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<div class="off-canvas position-left is-closed" id="offCanvasNestedPush" data-off-canvas>
  <div class="callout">
    <p>I'm a nested off-canvas that mustn't be a sibling of the off-canvas content anymore.</p>
    <p>Since push transition is currently not possible for nested elements, I'm forced to use overlayp transition.</p>
  </div>
</div>
<div class="off-canvas position-left is-closed" data-transition="overlap" id="offCanvasNestedOverlap" data-off-canvas>
  <div class="callout">I'm a nested off-canvas that uses overlap transition and the same position as the other nested off-canvas.</div>
</div>

<p>Enim, repudiandae officia dolores temporibus soluta, ipsa saepe tempora ipsum laudantium in mollitia quidem, nisi magni provident hic architecto rem culpa beatae.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

我是一个嵌套的屏幕外菜单，不再是屏幕外菜单内容的同级元素。

由于嵌套元素目前无法进行推送过渡，因此我被迫使用重叠过渡。

我是一个嵌套的屏幕外菜单，使用重叠过渡和与其他嵌套屏幕外菜单相同的位置。

Enim, repudiandae officia dolores temporibus soluta, ipsa saepe tempora ipsum laudantium in mollitia quidem, nisi magni provident hic architecto rem culpa beatae.

屏幕外菜单滚动框

如果 contentScroll: false，将可滚动元素放置在画布外会很棘手，因为在触摸设备上，由于停止了事件传播，可能难以滚动这些元素。不可能有连续的触摸移动。

但是，当您将 data-off-canvas-scrollbox 添加到可滚动元素时，您仍然可以实现这一点。一旦您到达滚动框的开头/结尾（在触摸移动时），画布外将继续滚动画布外元素。您可以选择使用带有 data-off-canvas-scrollbox-outer 的包装器，它会滚动而不是画布外元素。当您将可滚动元素嵌套到其他可滚动元素中或使用固定高度时，这很有用。

<div class="off-canvas-wrapper">
  <div class="off-canvas-content" data-off-canvas-content style="min-height: 300px;">
    <div class="grid-x">
      <div class="cell">
        <div class="primary callout">
          You have to view this example on a touch device or use e.g. the chrome dev tools with touch emulation.
        </div>
        <button type="button" class="button" data-toggle="offCanvasScrollbox">
          Open Scrollbox Off-canvas
        </button>
      </div>
    </div>
    <div class="off-canvas-absolute position-left" id="offCanvasScrollbox" data-off-canvas data-content-scroll="false">
      <div style="padding: 0 1rem;">
        <article data-off-canvas-scrollbox style="max-height: 290px; overflow: auto; padding: 0.5rem 0; margin-bottom: 1rem; box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
          <p>The 1st list supports continuous touchmove</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
        <article style="max-height: 290px; overflow: auto; padding: 0.5rem 0; margin-bottom: 1rem; box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
          <p>The 2nd list doesn't support continuous touchmove</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
        <article style="padding: 0.5rem 0;">
          <p>The 3rd list is regular content</p>
          <ul>
            <li>bullet 01</li>
            <li>bullet 02</li>
            <li>bullet 03</li>
            <li>bullet 04</li>
            <li>bullet 05</li>
            <li>bullet 06</li>
            <li>bullet 07</li>
            <li>bullet 08</li>
            <li>bullet 09</li>
            <li>bullet 10</li>
          </ul>
        </article>
      </div>
    </div>
  </div>
</div>

您必须在触摸设备上查看此示例，或者使用例如带有触摸模拟的 chrome 开发者工具。

第一个列表支持连续触摸移动

项目符号 01
项目符号 02
项目符号 03
项目符号 04
项目符号 05
项目符号 06
项目符号 07
项目符号 08
项目符号 09
项目符号 10

第二个列表不支持连续触摸移动

项目符号 01
项目符号 02
项目符号 03
项目符号 04
项目符号 05
项目符号 06
项目符号 07
项目符号 08
项目符号 09
项目符号 10

第三个列表是常规内容

项目符号 01
项目符号 02
项目符号 03
项目符号 04
项目符号 05
项目符号 06
项目符号 07
项目符号 08
项目符号 09
项目符号 10

粘性

默认情况下，当使用推送过渡打开画布外时，具有 position: fixed 的元素会消失。这样做的原因是画布外内容容器的 transform 属性会导致固定元素的 position: absolute 行为。

好消息：我们添加了保留固定外观的可能性！您只需将属性 data-off-canvas-sticky 添加到应该在打开画布外后保持固定的每个粘性/固定元素即可。

请注意，使用此属性将强制使用选项 `contentScroll: false`

<div class="top-bar sticky" data-sticky data-off-canvas-sticky>
  Sticky top bar that will remain sticky after having opened an off-canvas
</div>

画布外尺寸

在 v6.4.2 中，画布外大小变量的类型已从数字更改为映射。这使您可以定义断点特定大小，而不是所有大小的值。地图可能包含 $breakpoint-classes 中定义的每个键。

请注意，大小映射目前不适用于显示类。如果为中型和大型定义了尺寸，则 `.reveal-for-medium` 将仅考虑中型值。这将在未来的版本中得到修复。

$offcanvas-sizes: (
  small: 250px,
  medium: 350px,
);
$offcanvas-vertical-sizes: (
  small: 250px,
  medium: 350px,
);

从 v6.4 之前的版本迁移

如果您从 v6.3 升级，则无需执行任何操作，除非您更改了 $offcanvas-shadow 的默认值。在 v6.4 之前，此变量同时用于重叠和推送画布外元素。现在它仅用于重叠元素，而推送元素使用两个新变量

$offcanvas-inner-shadow-size 是一个数字（主要是 px）
$offcanvas-inner-shadow-color 是一种颜色（主要是 rgba）

因此，如果您更改了默认的画布外阴影，则必须在设置中调整这些变量的值。

从 v6.3 之前的版本迁移

`off-canvas-wrapper` 和 `off-canvas-wrapper-inner` 在新的画布外不再需要。如果您将它们保留在 6.3+ 画布外，它将按预期工作。

默认的画布外位置已从绝对位置更改为固定位置。这可能是您想要的位置，因为菜单在打开时始终可见，而与滚动位置无关。您可以使用内置类将画布外位置选择回绝对位置

.is-overlay-absolute
.is-overlay-fixed

或者在 _settings.scss 中全局设置 $offcanvas-fixed-reveal 变量为 false。

<div class="off-canvas position-left reveal-for-large" data-off-canvas>
  <!-- ... -->
</div>

6.3 之前的画布外设置

首先，创建两个包装器来容纳页面。这些是必要的，以防止画布外面板在未打开时可见。它们还消除了跨浏览器错误。

外部包装器具有类 .off-canvas-wrapper。
内部包装器具有类 .off-canvas-wrapper-inner 和属性 data-off-canvas-wrapper。

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper></div>
  </div>
</body>

在这些包装器内，使用类 .off-canvas 和属性 data-off-canvas 创建一个画布外面板。面板还需要一个定位类，可以是 .position-left 或 .position-right，以及为该位置设置的属性 data-position="left" 或 data-position="right"。最后，确保画布外面板具有唯一的 ID，以便可以对其进行定位。

除了面板之外，页面的主要内容将包含在其自己的容器中，该容器具有类 .off-canvas-content 和属性 data-off-canvas-content。您将把实际的页面内容放在 .off-canvas-content 类中。）

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
      <div class="off-canvas-content" data-off-canvas-content></div>
    </div>
  </div>
</body>

Sass 参考

变量

可以使用项目设置文件中的这些 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$offcanvas-sizes`	地图	`小：250 像素`	左/右画布外面板的宽度映射。
`$offcanvas-vertical-sizes`	地图	`小：250 像素`	顶部/底部画布外面板的高度映射。
`$offcanvas-background`	颜色	`$light-gray`	画布外面板的背景颜色。
`$offcanvas-shadow`	阴影	`0 0 10px rgba($black, 0.7)`	画布外重叠面板的阴影。
`$offcanvas-inner-shadow-size`	数字	`20 像素`	画布外推送面板的内部阴影大小。
`$offcanvas-inner-shadow-color`	颜色	`rgba($black, 0.25)`	画布外推送面板的内部阴影颜色。
`$offcanvas-overlay-zindex`	数字	`11`	画布外内容叠加层的 Z 索引。
`$offcanvas-push-zindex`	数字	`12`	具有 `push` 过渡的画布外面板的 Z 索引。
`$offcanvas-overlap-zindex`	数字	`13`	具有 `overlap` 过渡的画布外面板的 Z 索引。
`$offcanvas-reveal-zindex`	数字	`12`	使用 `reveal-for-*` 类或 mixin 的画布外面板的 Z 索引。
`$offcanvas-transition-length`	数字	`0.5 秒`	画布外面板上的动画长度。
`$offcanvas-transition-timing`	关键字	`轻松`	画布外面板上的动画计时函数。
`$offcanvas-fixed-reveal`	布尔值	`真的`	如果为 `true`，则显示的画布外将是固定位置，并随屏幕滚动。
`$offcanvas-exit-background`	颜色	`rgba($white, 0.25)`	画布外面板打开时出现的叠加层的背景颜色。
`$maincontent-class`		`“画布外内容”`	用于主要内容区域的 CSS 类。画布外 mixin 使用它来定位页面内容。
`$titlebar-background`	颜色	`$black`	标题栏的背景颜色。
`$titlebar-color`	颜色	`$white`	标题栏中文本的颜色。
`$titlebar-padding`	长度	`0.5rem`	标题栏内的填充。
`$titlebar-text-font-weight`	重量	`大胆的`	标题栏中文本的字体粗细。
`$titlebar-icon-color`	颜色	`$white`	标题栏内菜单图标的颜色。
`$titlebar-icon-color-hover`	颜色	`$medium-gray`	悬停时标题栏内菜单图标的颜色。
`$titlebar-icon-spacing`	长度	`0.25rem`	标题栏内菜单图标和文本之间的间距。

混合宏

我们使用这些 mixin 来构建此组件的最终 CSS 输出。您可以自己使用 mixin 从我们的组件中构建自己的类结构。

画布外基础

@include off-canvas-basics;

添加画布外的基线样式。此 CSS 是使其他部分工作所必需的。

画布外基础

@include off-canvas-base;

添加画布外面板的基本样式。

画布外位置

@include off-canvas-position;

添加样式以将画布外面板定位到左/右/上/下。

画布外内容

@include off-canvas-content;

设置内容容器的样式。

画布外显示

@include off-canvas-reveal;

添加显示画布外面板的样式。

画布内

@include in-canvas;

覆盖画布外样式

JavaScript 参考

初始化

您的 JavaScript 中必须包含以下文件才能使用此插件

foundation.core.js
foundation.offcanvas.js
- 使用实用程序库 foundation.util.keyboard.js
- 使用实用程序库 foundation.util.mediaQuery.js
- 使用实用程序库 foundation.util.triggers.js

Foundation.OffCanvas

创建一个画布外包装器的新实例。

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

触发这些事件： OffCanvas#event:init

名称	类型	描述
`元素`	对象	要初始化的 jQuery 对象。
`选项`	对象	覆盖默认插件设置。

插件选项

使用这些选项来自定义画布外实例。插件选项可以设置为单独的数据属性、一个组合的 data-options 属性或作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-close-on-click`	`布尔值`	`真的`	允许用户单击菜单外部以将其关闭。
`data-content-overlay`	`布尔值`	`真的`	在 `[data-off-canvas-content]` 之上添加一个叠加层。
`data-content-id`	`字符串`	`空`	按 ID 定位可以放置在任何位置的画布外内容容器。如果为空，则将采用最近的内容容器。
`data-nested`	`布尔值`	`空`	定义嵌套在画布外内容中的画布外元素。对嵌套元素使用 contentId 选项时，这是必需的。
`data-content-scroll`	`布尔值`	`真的`	打开画布外面板时启用/禁用主要内容的滚动。
`data-transition-time`	`字符串`	`空`	打开和关闭转换所需的时间，包括适当的毫秒 ( `ms` ) 或秒 ( `s` ) 单位（例如 `500ms`、`.75s` ）如果未选择，则从正文样式中提取。
`data-transition`	`字符串`	`推`	OffCanvas 菜单的过渡类型。选项包括“推送”、“分离”或“滑动”。
`data-force-to`	`字符串`	`空`	强制页面在打开时滚动到顶部或底部。
`data-is-revealed`	`布尔值`	`假`	允许 OffCanvas 在某些断点处保持打开状态。
`data-reveal-on`	`字符串`	`空`	要显示的断点。 JS 将使用 RegExp 来定位标准类，如果更改类名，请使用 `revealClass` 选项传递您的类。
`data-in-canvas-on`	`字符串`	`空`	画布外元素被移动到画布内容中并充当常规页面元素的断点。
`data-auto-focus`	`布尔值`	`真的`	强制在打开时将焦点放在画布外。如果为 true，则将在关闭时聚焦打开触发器。
`data-reveal-class`	`字符串`	`reveal-for-`	用于强制 OffCanvas 保持打开状态的类。 Foundation 的默认值为 `reveal-for-large` 和 `reveal-for-medium`。
`data-trap-focus`	`布尔值`	`假`	在打开 OffCanvas 时触发可选的焦点捕获。出于可访问性目的，将 [data-off-canvas-content] 的 tabindex 设置为 -1。

事件

这些事件将从附加了 Off-canvas 插件的任何元素触发。

名称	描述
`opened.zf.offCanvas`	画布外菜单打开时触发。
`openedEnd.zf.offCanvas`	画布外菜单打开转换完成时触发。
`close.zf.offCanvas`	画布外菜单关闭时触发。
`closed.zf.offCanvas`	画布外菜单关闭转换完成时触发。

方法

显示

$('#element').foundation('reveal', isRevealed);

处理在断点处显示/隐藏画布外，与打开不同。

名称	类型	描述
`isRevealed`	布尔值	如果应该显示元素，则为 true。

打开

$('#element').foundation('open', event, trigger);

打开画布外菜单。

触发这些事件： OffCanvas#event:opened

名称	类型	描述
`事件`	对象	从侦听器传递的事件对象。
`触发`	jQuery	触发画布外打开的元素。

关闭

$('#element').foundation('close', cb);

关闭画布外菜单。

触发这些事件： OffCanvas#event:close OffCanvas#event:closed

名称	类型	描述
`cb`	功能	可选的 cb 在关闭后触发。

切换

$('#element').foundation('toggle', event, trigger);

切换侧边菜单的打开或关闭状态。

名称	类型	描述
`事件`	对象	从侦听器传递的事件对象。
`触发`	jQuery	触发画布外打开的元素。

_destroy

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

销毁 OffCanvas 插件。