Foundation 下拉菜单

Foundation 下拉菜单（Dropdown）是一个交互式组件，可以显示隐藏的内容。本章将介绍下拉菜单的各种用法。

基本下拉菜单

下拉菜单由触发器和下拉面板两部分组成：

<!-- 触发按钮 -->
<button class="button" type="button" data-toggle="example-dropdown">
    打开下拉菜单
</button>

<!-- 下拉面板 -->
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
    <p>这是下拉菜单的内容。</p>
</div>

下拉菜单位置

使用 data-position 和 data-alignment 控制位置：

<!-- 底部居中（默认） -->
<div class="dropdown-pane" id="dropdown-1" data-dropdown data-position="bottom" data-alignment="center">
    内容
</div>

<!-- 底部左对齐 -->
<div class="dropdown-pane" id="dropdown-2" data-dropdown data-position="bottom" data-alignment="left">
    内容
</div>

<!-- 底部右对齐 -->
<div class="dropdown-pane" id="dropdown-3" data-dropdown data-position="bottom" data-alignment="right">
    内容
</div>

<!-- 顶部 -->
<div class="dropdown-pane" id="dropdown-4" data-dropdown data-position="top" data-alignment="center">
    内容
</div>

<!-- 左侧 -->
<div class="dropdown-pane" id="dropdown-5" data-dropdown data-position="left" data-alignment="center">
    内容
</div>

<!-- 右侧 -->
<div class="dropdown-pane" id="dropdown-6" data-dropdown data-position="right" data-alignment="center">
    内容
</div>

悬停触发

使用 data-hover="true" 启用悬停触发：

<button class="button" type="button" data-toggle="hover-dropdown">
    悬停打开
</button>

<div class="dropdown-pane" id="hover-dropdown" data-dropdown data-hover="true" data-hover-pane="true">
    <p>鼠标悬停时显示。</p>
</div>

导航下拉菜单

结合菜单组件创建导航下拉：

<ul class="dropdown menu" data-dropdown-menu>
    <li>
        <a href="#">一级菜单</a>
        <ul class="menu vertical">
            <li><a href="#">二级菜单 1</a></li>
            <li><a href="#">二级菜单 2</a></li>
            <li><a href="#">二级菜单 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">产品</a>
        <ul class="menu vertical">
            <li><a href="#">产品 A</a></li>
            <li><a href="#">产品 B</a></li>
            <li>
                <a href="#">更多产品</a>
                <ul class="menu vertical">
                    <li><a href="#">产品 C</a></li>
                    <li><a href="#">产品 D</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
</ul>

下拉菜单按钮

带下拉箭头的按钮：

<button class="button dropdown" type="button" data-toggle="action-dropdown">
    操作
</button>

<div class="dropdown-pane" id="action-dropdown" data-dropdown>
    <ul class="menu vertical">
        <li><a href="#">编辑</a></li>
        <li><a href="#">复制</a></li>
        <li><a href="#">删除</a></li>
    </ul>
</div>

分割按钮

<div class="button-group">
    <a class="button">保存</a>
    <button class="dropdown button arrow-only" data-toggle="split-dropdown">
        <span class="show-for-sr">显示更多选项</span>
    </button>
</div>

<div class="dropdown-pane" id="split-dropdown" data-dropdown>
    <ul class="menu vertical">
        <li><a href="#">另存为</a></li>
        <li><a href="#">保存并退出</a></li>
        <li><a href="#">保存副本</a></li>
    </ul>
</div>

自定义内容下拉

下拉菜单可以包含任何 HTML 内容：

<button class="button" type="button" data-toggle="form-dropdown">
    快速登录
</button>

<div class="dropdown-pane" id="form-dropdown" data-dropdown style="width: 300px;">
    <h5>用户登录</h5>
    <form>
        <label>
            用户名
            <input type="text" placeholder="请输入用户名">
        </label>
        <label>
            密码
            <input type="password" placeholder="请输入密码">
        </label>
        <div class="grid-x grid-margin-x">
            <div class="cell auto">
                <label>
                    <input type="checkbox"> 记住我
                </label>
            </div>
            <div class="cell shrink">
                <a href="#">忘记密码？</a>
            </div>
        </div>
        <button class="button expanded" type="submit">登录</button>
    </form>
</div>

下拉菜单样式

自定义宽度

<style>
    .dropdown-pane.wide {
        width: 400px;
    }
</style>

<div class="dropdown-pane wide" id="wide-dropdown" data-dropdown>
    <p>这是一个宽度为 400px 的下拉菜单。</p>
</div>

带边框的菜单

<style>
    .dropdown-pane .menu.bordered li {
        border-bottom: 1px solid #eee;
    }
    .dropdown-pane .menu.bordered li:last-child {
        border-bottom: none;
    }
</style>

<div class="dropdown-pane" id="bordered-dropdown" data-dropdown>
    <ul class="menu vertical bordered">
        <li><a href="#">菜单项 1</a></li>
        <li><a href="#">菜单项 2</a></li>
        <li><a href="#">菜单项 3</a></li>
    </ul>
</div>

带图标的菜单

<div class="dropdown-pane" id="icon-dropdown" data-dropdown>
    <ul class="menu vertical">
        <li><a href="#"><i class="fi-pencil"></i> 编辑</a></li>
        <li><a href="#"><i class="fi-page-copy"></i> 复制</a></li>
        <li><a href="#"><i class="fi-download"></i> 下载</a></li>
        <li><a href="#"><i class="fi-trash"></i> 删除</a></li>
    </ul>
</div>

配置选项

<div class="dropdown-pane" id="config-dropdown" data-dropdown
     data-hover="false"
     data-close-on-click="true"
     data-auto-focus="true"
     data-force-follow="true"
     data-v-offset="10"
     data-h-offset="0">
    内容
</div>

选项	说明	默认值
data-hover	悬停触发	false
data-close-on-click	点击关闭	true
data-auto-focus	自动聚焦	true
data-v-offset	垂直偏移	0
data-h-offset	水平偏移	0

JavaScript API

打开/关闭

// 获取实例
var dropdown = new Foundation.Dropdown($('#my-dropdown'));

// 打开
dropdown.open();

// 关闭
dropdown.close();

// 切换
dropdown.toggle();

事件

$('#my-dropdown').on('show.zf.dropdown', function() {
    console.log('下拉菜单打开');
});

$('#my-dropdown').on('hide.zf.dropdown', function() {
    console.log('下拉菜单关闭');
});

完整示例

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 下拉菜单示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }
        .dropdown-pane .menu a {
            padding: 10px 15px;
        }
        .dropdown-pane .menu a i {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 下拉菜单展示</h1>

        <div class="demo-section">
            <h3>基本下拉菜单</h3>
            <button class="button" type="button" data-toggle="basic-dropdown">
                点击打开
            </button>
            <div class="dropdown-pane" id="basic-dropdown" data-dropdown data-auto-focus="true">
                <p>这是基本的下拉菜单内容。</p>
                <p>可以包含任何 HTML 元素。</p>
            </div>
        </div>

        <div class="demo-section">
            <h3>悬停下拉菜单</h3>
            <button class="button secondary" type="button" data-toggle="hover-dropdown-demo">
                悬停打开
            </button>
            <div class="dropdown-pane" id="hover-dropdown-demo" data-dropdown data-hover="true" data-hover-pane="true">
                <p>鼠标悬停时自动显示。</p>
            </div>
        </div>

        <div class="demo-section">
            <h3>下拉菜单位置</h3>
            <button class="button" type="button" data-toggle="pos-bottom">底部</button>
            <div class="dropdown-pane" id="pos-bottom" data-dropdown data-position="bottom" data-alignment="center">
                底部居中
            </div>

            <button class="button" type="button" data-toggle="pos-top">顶部</button>
            <div class="dropdown-pane" id="pos-top" data-dropdown data-position="top" data-alignment="center">
                顶部居中
            </div>

            <button class="button" type="button" data-toggle="pos-left">左侧</button>
            <div class="dropdown-pane" id="pos-left" data-dropdown data-position="left" data-alignment="center">
                左侧居中
            </div>

            <button class="button" type="button" data-toggle="pos-right">右侧</button>
            <div class="dropdown-pane" id="pos-right" data-dropdown data-position="right" data-alignment="center">
                右侧居中
            </div>
        </div>

        <div class="demo-section">
            <h3>带图标的菜单</h3>
            <button class="button dropdown" type="button" data-toggle="icon-menu">
                操作菜单
            </button>
            <div class="dropdown-pane" id="icon-menu" data-dropdown>
                <ul class="menu vertical">
                    <li><a href="#"><i class="fi-pencil"></i> 编辑</a></li>
                    <li><a href="#"><i class="fi-page-copy"></i> 复制</a></li>
                    <li><a href="#"><i class="fi-download"></i> 下载</a></li>
                    <li><a href="#"><i class="fi-share"></i> 分享</a></li>
                    <li><a href="#" style="color: #cc4b37;"><i class="fi-trash"></i> 删除</a></li>
                </ul>
            </div>
        </div>

        <div class="demo-section">
            <h3>分割按钮</h3>
            <div class="button-group">
                <a class="button">保存文档</a>
                <button class="dropdown button arrow-only" data-toggle="split-demo">
                    <span class="show-for-sr">更多选项</span>
                </button>
            </div>
            <div class="dropdown-pane" id="split-demo" data-dropdown>
                <ul class="menu vertical">
                    <li><a href="#">另存为...</a></li>
                    <li><a href="#">保存并关闭</a></li>
                    <li><a href="#">保存副本</a></li>
                    <li><a href="#">导出为 PDF</a></li>
                </ul>
            </div>
        </div>

        <div class="demo-section">
            <h3>导航下拉菜单</h3>
            <ul class="dropdown menu" data-dropdown-menu>
                <li>
                    <a href="#">产品</a>
                    <ul class="menu vertical">
                        <li><a href="#">软件产品</a></li>
                        <li><a href="#">硬件产品</a></li>
                        <li>
                            <a href="#">解决方案</a>
                            <ul class="menu vertical">
                                <li><a href="#">企业方案</a></li>
                                <li><a href="#">个人方案</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">服务</a>
                    <ul class="menu vertical">
                        <li><a href="#">技术支持</a></li>
                        <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="demo-section">
            <h3>表单下拉菜单</h3>
            <button class="button" type="button" data-toggle="form-demo">
                快速登录
            </button>
            <div class="dropdown-pane" id="form-demo" data-dropdown data-close-on-click="false" style="width: 300px;">
                <h5>用户登录</h5>
                <form>
                    <label>
                        用户名
                        <input type="text" placeholder="请输入用户名">
                    </label>
                    <label>
                        密码
                        <input type="password" placeholder="请输入密码">
                    </label>
                    <div class="grid-x">
                        <div class="cell auto">
                            <label><input type="checkbox"> 记住我</label>
                        </div>
                        <div class="cell shrink">
                            <a href="#">忘记密码？</a>
                        </div>
                    </div>
                    <button class="button expanded" type="submit">登录</button>
                </form>
            </div>
        </div>

        <div class="demo-section">
            <h3>通知下拉</h3>
            <button class="button" type="button" data-toggle="notification-dropdown">
                通知 <span class="badge">3</span>
            </button>
            <div class="dropdown-pane" id="notification-dropdown" data-dropdown style="width: 300px; padding: 0;">
                <div style="padding: 15px; border-bottom: 1px solid #eee;">
                    <strong>通知</strong>
                    <a href="#" class="float-right" style="font-size: 12px;">全部标为已读</a>
                </div>
                <ul class="menu vertical" style="margin: 0;">
                    <li style="border-bottom: 1px solid #eee;">
                        <a href="#" style="padding: 15px;">
                            <strong>系统通知</strong><br>
                            <small>您的订单已发货</small>
                        </a>
                    </li>
                    <li style="border-bottom: 1px solid #eee;">
                        <a href="#" style="padding: 15px;">
                            <strong>消息提醒</strong><br>
                            <small>张三给您发送了一条消息</small>
                        </a>
                    </li>
                    <li>
                        <a href="#" style="padding: 15px;">
                            <strong>系统更新</strong><br>
                            <small>新版本已发布</small>
                        </a>
                    </li>
                </ul>
                <div style="padding: 10px; text-align: center; border-top: 1px solid #eee;">
                    <a href="#">查看全部通知</a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

下拉菜单最佳实践

1. 合理使用：只在需要显示次要操作或选项时使用下拉菜单
2. 菜单项数量：建议不超过 10 个选项
3. 分组：使用分隔线或标题对菜单项进行分组
4. 可访问性：确保键盘可以操作下拉菜单
5. 移动端：考虑移动端用户的触摸体验

<!-- 带分组的下拉菜单 -->
<ul class="menu vertical">
    <li class="menu-text">编辑</li>
    <li><a href="#">剪切</a></li>
    <li><a href="#">复制</a></li>
    <li><a href="#">粘贴</a></li>
    <li class="menu-text">查看</li>
    <li><a href="#">放大</a></li>
    <li><a href="#">缩小</a></li>
</ul>

总结

本章我们学习了：

• 基本下拉菜单的创建
• 下拉菜单的位置和对齐
• 悬停触发和导航下拉
• 分割按钮
• 自定义内容下拉（表单、通知等）
• JavaScript API 的使用

下一章，我们将学习 Foundation 折叠列表。

---

提示：下拉菜单是常用的交互组件，注意在移动设备上测试其可用性。