数据驱动GEO优化：通过地区用户行为分析提升网站适配精准度
2026/6/12 9:35:57
Foundation 侧边栏（Sidebar）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把侧边栏（Sidebar）讲得明明白白！Foundation 6+ 没有单独的“Sidebar”组件，而是通过强大组合实现超级响应式侧边栏：
- 大屏固定侧边栏：用 XY Grid + Vertical Menu / Accordion Menu
- 小屏隐藏侧边栏：用 Off-Canvas（点击汉堡菜单从侧边滑出，移动端必备！）
- 常用于后台管理系统、仪表盘、文档站点
1. 基本固定侧边栏（大屏显示，小屏隐藏）
用 Grid 布局 + Vertical Menu：
<divclass="grid-x"><divclass="cell medium-auto"><!-- 主内容区 --><h3>主内容区域</h3><p>这里放页面内容...</p></div><divclass="cell medium-3 large-2 show-for-medium"><!-- 侧边栏，只在中屏以上显示 --><ulclass="vertical menu accordion-menu"data-accordion-menu><li><ahref="#">仪表盘</a></li><li><ahref="#">用户管理</a><ulclass="menu vertical nested"><li><ahref="#">用户列表</a></li><li><ahref="#">添加用户</a></li></ul></li><li><ahref="#">设置</a></li></ul></div></div>2. Off-Canvas 响应式侧边栏（推荐！移动端完美）
大屏固定显示，小屏滑出（结合 Drilldown 或 Accordion Menu）：
<divclass="off-canvas-wrapper"><divclass="off-canvas position-left"id="offCanvas"data-off-canvas><!-- 侧边栏内容 --><ulclass="vertical menu drilldown"data-drilldown><li><ahref="#">首页</a></li><li><ahref="#">产品</a><ulclass="menu vertical"><li><ahref="#">产品A</a></li><li><ahref="#">产品B</a></li></ul></li></ul></div><divclass="off-canvas-content"data-off-canvas-content><!-- 主内容 + 触发按钮 --><buttontype="button"class="button"data-toggle="offCanvas">打开侧边栏</button><h3>主内容</h3></div></div>3. 今天直接给你抄的完整代码（复制就能跑，带 Off-Canvas + Accordion）
<!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:#333;color:white;}.off-canvas a{color:white;}</style></head><body><divclass="off-canvas-wrapper"><divclass="off-canvas position-left"id="sidebar"data-off-canvas><ulclass="vertical menu accordion-menu"data-accordion-menu><li><ahref="#">🏠 仪表盘</a></li><li><ahref="#">👥 用户管理</a><ulclass="menu vertical nested"><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 show-for-small-only"><divclass="title-bar-left"><buttontype="button"data-toggle="sidebar">☰ 菜单</button><spanclass="title-bar-title">MyApp</span></div></div><divclass="grid-container"><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
- 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”
“帮我做后台侧边栏”
“给我暗黑侧边栏”
我立刻给你写好！