Foundation 6 Off-canvas菜单：小屏Push/中屏In-canvas模式实现咨询

当然可行！在Foundation 6里，你完全可以借助它的媒体查询系统和动态初始化能力，根据屏幕尺寸切换Off-canvas菜单的过渡模式。下面是针对你需求的分步解决方案：

核心思路 #

Foundation的Off-canvas组件支持通过配置项transition设置过渡模式（overlap/push/reveal等），我们可以结合Foundation的断点检测，在不同屏幕尺寸下切换这个配置，同时配合少量CSS调整确保布局正常。

1. 基础HTML结构 #

先搭建标准的Off-canvas菜单结构，保留Foundation要求的核心类和data属性：

<div class="off-canvas-wrapper">
  <!-- 侧边菜单 -->
  <div class="off-canvas position-left" id="mainOffCanvas" data-off-canvas>
    <ul class="vertical menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </div>

  <!-- 主内容区 -->
  <div class="off-canvas-content" data-off-canvas-content>
    <!-- 菜单触发按钮 -->
    <button type="button" class="menu-icon float-left" data-toggle="mainOffCanvas"></button>
    <h1>页面主内容</h1>
    <!-- 其余内容 -->
  </div>
</div>

2. 动态切换模式的JavaScript实现 #

初始化Off-canvas组件，并监听窗口尺寸变化，根据Foundation默认断点（small为<640px，medium为≥640px）切换过渡模式：

// 初始化Off-canvas，默认适配中屏的overlap模式
let offCanvasInstance = new Foundation.OffCanvas($('#mainOffCanvas'), {
  position: 'left',
  transition: 'overlap'
});

// 监听窗口 resize 事件，动态切换模式
$(window).on('resize', function() {
  // 获取当前屏幕对应的Foundation断点
  const currentBreakpoint = Foundation.MediaQuery.current;
  // 确定当前需要的过渡模式
  const targetTransition = currentBreakpoint === 'small' ? 'push' : 'overlap';

  // 如果当前模式和目标模式不一致，重新初始化组件
  if (offCanvasInstance.options.transition !== targetTransition) {
    // 先销毁旧实例，避免内存泄漏
    offCanvasInstance.destroy();
    // 创建新实例，应用目标模式
    offCanvasInstance = new Foundation.OffCanvas($('#mainOffCanvas'), {
      position: 'left',
      transition: targetTransition
    });
  }
}).trigger('resize'); // 页面加载时主动触发一次resize，确保初始模式正确

3. 可选CSS调整（解决布局细节问题） #

不同过渡模式下组件布局可能有细微差异，你可以针对断点自定义样式：

/* 小屏push模式下，调整主内容区的过渡动画（可选） */
@media screen and (max-width: 639px) {
  .off-canvas-content {
    transition: transform 0.3s ease-in-out;
  }
}

/* 中屏overlap模式下，确保菜单层级正确 */
@media screen and (min-width: 640px) {
  .off-canvas.position-left {
    z-index: 105; /* 确保菜单覆盖在主内容上方 */
  }
}

注意事项 #

• 确保已加载Foundation的MediaQuery模块（默认包含在完整的Foundation JS包中），否则无法获取当前断点。
• 如果用Foundation的Sass自定义了断点（比如修改$breakpoint-small变量），请确保JS中判断的尺寸和Sass变量保持一致。
• 重新初始化组件时，记得先销毁旧实例，避免重复绑定事件导致异常。

内容的提问来源于stack exchange，提问作者Ricardo