LangChain与LangGraph：构建模块化AI智能体的核心技术
2026/7/27 8:08:26
Foundation 列表（Menu）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把列表（主要是 Menu 组件）讲得清清楚楚！Foundation 6+ 中的 Menu 是最强大的列表系统，可以轻松做成：
- 简单无序/有序列表
- 水平导航菜单
- 垂直侧边栏菜单
- 带图标的列表
- 嵌套子菜单（结合 Dropdown 或 Accordion Menu）
Menu 超级灵活，响应式强，移动端自动适配！
1. 基本 Menu（水平和垂直）
<!-- 水平菜单 --><ulclass="menu"><li><ahref="#">首页</a></li><li><ahref="#">产品</a></li><li><ahref="#">关于</a></li></ul><!-- 垂直菜单 --><ulclass="vertical menu"><li><ahref="#">仪表盘</a></li><li><ahref="#">设置</a></li><li><ahref="#">退出</a></li></ul>2. 带图标的 Menu（最常用，好看！）
用 Foundation Icons 或 Font Awesome：
<ulclass="menu icon-top"><!-- 图标在上 --><li><ahref="#"><iclass="fi-home"></i>首页</a></li><li><ahref="#"><iclass="fi-widget"></i>组件</a></li></ul><ulclass="menu icons-left aligned"><!-- 图标在左 + 对齐 --><li><ahref="#"><iclass="fi-mail"></i>消息</a></li><li><ahref="#"><iclass="fi-heart"></i>收藏</a></li></ul>3. 嵌套 Menu（子列表）
<ulclass="menu vertical"><li><ahref="#">一级菜单</a><ulclass="menu nested"><!-- nested 实现缩进 --><li><ahref="#">二级 A</a></li><li><ahref="#">二级 B</a></li></ul></li></ul>4. 响应式 + 对齐方式
<ulclass="menu align-center expanded"><!-- 居中 + 平均分配宽度 --><li><ahref="#">链接1</a></li><li><ahref="#">链接2</a></li></ul><ulclass="menu simple"><!-- 简单模式，无背景/边框，常用于子菜单 --><li><ahref="#">子项</a></li></ul>5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-icons@1.0.0/foundation-icons.css"></head><body><h3>Foundation Menu 列表全家福</h3><!-- 水平菜单 --><ulclass="menu"><li><ahref="#">首页</a></li><li><ahref="#">产品</a></li><li><ahref="#">博客</a></li></ul><!-- 带图标垂直菜单 --><ulclass="vertical menu icon-left"style="max-width:250px;margin-top:20px;"><li><ahref="#"><iclass="fi-home"></i>首页</a></li><li><ahref="#"><iclass="fi-book"></i>文档</a></li><li><ahref="#"><iclass="fi-widget"></i>组件</a><ulclass="menu nested"><li><ahref="#">按钮</a></li><li><ahref="#">进度条</a></li></ul></li></ul><!-- 居中对齐菜单 --><ulclass="menu align-center expanded"style="margin-top:20px;"><li><ahref="#">链接1</a></li><li><ahref="#">链接2</a></li><li><ahref="#">链接3</a></li></ul><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 Menu 列表示例）：
官方文档（最新版）：https://get.foundation/sites/docs/menu.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是分页（Pagination）？
→ 帮我做一个带图标的垂直侧边栏菜单（5个项 + 嵌套）？
→ 给我一个完整响应式导航栏（Top Bar + Menu）？
直接回复下一句：
“明天讲 table”
“帮我做侧边栏菜单”
“给我 Top Bar 导航”
我立刻给你写好！