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