Foundation 侧边栏（Sidebar）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 侧边栏（Sidebar）讲得明明白白！Foundation 6+ 没有单独的“Sidebar”组件，而是通过强大组合实现超级响应式侧边栏：
- 大屏固定侧边栏：用 XY Grid + Vertical Menu / Accordion Menu
- 小屏隐藏侧边栏：用 Off-Canvas（点击汉堡菜单从侧边滑出，移动端必备！）
- 常用于后台管理系统、仪表盘、文档站点
1. 基本固定侧边栏（大屏显示，小屏隐藏）
用 Grid 布局 + Vertical Menu：
<div class="grid-x">
<div class="cell medium-auto"> <!-- 主内容区 -->
<h3>主内容区域</h3>
<p>这里放页面内容...</p>
</div>
<div class="cell medium-3 large-2 show-for-medium"> <!-- 侧边栏，只在中屏以上显示 -->
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li><a href="#">仪表盘</a></li>
<li>
<a href="#">用户管理</a>
<ul class="menu vertical nested">
<li><a href="#">用户列表</a></li>
<li><a href="#">添加用户</a></li>
</ul>
</li>
<li><a href="#">设置</a></li>
</ul>
</div>
</div>2. Off-Canvas 响应式侧边栏（推荐！移动端完美）
大屏固定显示，小屏滑出（结合 Drilldown 或 Accordion Menu）：
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- 侧边栏内容 -->
<ul class="vertical menu drilldown" data-drilldown>
<li><a href="#">首页</a></li>
<li>
<a href="#">产品</a>
<ul class="menu vertical">
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
</ul>
</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- 主内容 + 触发按钮 -->
<button type="button" class="button" data-toggle="offCanvas">打开侧边栏</button>
<h3>主内容</h3>
</div>
</div>3. 今天直接给你抄的完整代码（复制就能跑，带 Off-Canvas + Accordion）
<!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: #333; color: white; }
.off-canvas a { color: white; }
</style>
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="sidebar" data-off-canvas>
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li><a href="#">🏠 仪表盘</a></li>
<li>
<a href="#">👥 用户管理</a>
<ul class="menu vertical nested">
<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 show-for-small-only">
<div class="title-bar-left">
<button type="button" data-toggle="sidebar">☰ 菜单</button>
<span class="title-bar-title">MyApp</span>
</div>
</div>
<div class="grid-container">
<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
- Vertical Menu + Accordion Menu：https://get.foundation/sites/docs/menu.html
- XY Grid 布局：https://get.foundation/sites/docs/xy-grid.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是模态框（Reveal/Modal）？
→ 帮我做一个带 logo + 用户头像的后台侧边栏？
→ 给我一个固定宽度 + 暗黑模式的侧边栏代码？
直接回复下一句：
“明天讲 table”
“帮我做后台侧边栏”
“给我暗黑侧边栏”
我立刻给你写好！
