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