Foundation 滑动导航（Off-Canvas）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 滑动导航（Off-Canvas）讲得明明白白！这是 Foundation 6+ 中最强大的响应式组件，用于实现移动端侧边滑出菜单、侧边栏、购物车等。大屏可以固定显示，小屏点击汉堡图标从左侧/右侧/顶部/底部滑出，动画丝滑，支持多层嵌套、叠加模式等。
1. 基本结构（左侧滑出，最常用）
<div class="off-canvas-wrapper">
<!-- 滑动面板（侧边栏） -->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<h5>菜单</h5>
<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>
<!-- 触发按钮（小屏显示） -->
<div class="title-bar show-for-small-only">
<div class="title-bar-left">
<button type="button" data-open="offCanvasLeft">☰ 菜单</button>
</div>
</div>
<div class="grid-container">
<h3>主内容区域</h3>
<p>这里是页面主体内容...</p>
</div>
</div>
</div>2. 常见变体
- 右侧滑出：
position-right - 叠加模式（不推开内容）：加
data-off-canvas="{overlap: true}" - 多面板：可以同时有 left + right
- 结合 Drilldown Menu（多级钻取菜单，移动端超友好）：
<ul class="vertical menu drilldown" data-drilldown>
<li><a href="#">一级</a>
<ul class="menu vertical">
<li><a href="#">二级</a></li>
</ul>
</li>
</ul>3. 今天直接给你抄的完整代码（复制就能跑，带多级菜单）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
<style>
.off-canvas { background: #1779ba; color: white; }
.off-canvas a { color: white; }
.off-canvas .close-button { color: white; }
</style>
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="mySidebar" data-off-canvas data-transition="overlap">
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<h4 class="text-center">MyApp</h4>
<ul class="vertical menu drilldown" data-drilldown>
<li><a href="#">🏠 首页</a></li>
<li>
<a href="#">📁 项目管理</a>
<ul class="menu vertical">
<li><a href="#">项目列表</a></li>
<li><a href="#">新建项目</a></li>
</ul>
</li>
<li><a href="#">👤 个人中心</a></li>
<li><a href="#">⚙️ 设置</a></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button type="button" data-toggle="mySidebar">☰ 菜单</button>
<span class="title-bar-title">欢迎使用</span>
</div>
</div>
<div class="grid-container" style="padding:20px;">
<h3>滑动导航演示</h3>
<p>点击左上角菜单图标（或缩小浏览器），体验侧边滑出效果！支持多级嵌套、平滑动画。</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方和项目中最标准的 Foundation Off-Canvas 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/off-canvas.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是模态框（Reveal）？
→ 帮我做一个右侧滑出的购物车 Off-Canvas？
→ 给我一个双侧（左菜单 + 右设置）的完整布局？
直接回复下一句：
“明天讲 table”
“帮我做购物车滑动”
“给我双侧 Off-Canvas”
我立刻给你写好！
