Foundation 下拉菜单（Dropdown）

一、下拉菜单概述

Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值，适合作为操作菜单、筛选条件或导航补充。

实现下拉菜单需要两个元素配合：

触发按钮：使用 <a> 或 <button> 标签，通过 data-dropdown 属性关联目标容器
下拉内容容器：使用 <ul> 元素，设置 data-dropdown-content 和 .f-dropdown 类，并通过 id 与触发按钮对应

必须初始化 Foundation JS：$(document).foundation();

二、基础下拉菜单

<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>

<ul id="id01" data-dropdown-content class="f-dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>Code language: HTML, XML (xml)

data-dropdown="id01" 的值必须与下方 <ul> 的 id="id01" 一致，才能正确关联。

三、下拉菜单尺寸

使用 .tiny、.small、.medium、.large 或 .mega 类修改下拉菜单的宽度：

类名	说明
`.tiny`	超小宽度
`.small`	小宽度
`.medium`	中等宽度
`.large`	大宽度
`.mega`	全宽

<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>

<ul id="id01" data-dropdown-content class="f-dropdown large">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>Code language: HTML, XML (xml)

注意：在小屏幕设备上，所有下拉菜单宽度自动变为 100%。

四、下拉菜单内边距

使用 .content 类为下拉菜单添加额外内边距，适合放置非链接类内容（如文本、表单）：

<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>

<ul id="id01" data-dropdown-content class="f-dropdown content">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>Code language: HTML, XML (xml)

五、下拉菜单方向

默认情况下，下拉菜单在触发按钮底部展开。可通过 data-options="align:left|right|top" 修改展开方向：

<a href="#" data-dropdown="id01" class="button dropdown" data-options="align:left">Dropdown Button</a>

<ul id="id01" data-dropdown-content class="f-dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>Code language: HTML, XML (xml)

注意：如果上方空间不足（如靠近页面顶部边缘），下拉菜单会自动向下展开，即使设置了 align:top 也会向下显示。

六、触发方式（点击 / 悬停）

默认情况下，点击按钮触发下拉菜单。如需鼠标悬停即显示，添加 data-options="is_hover:true"：

<a href="#" data-dropdown="id01" class="button dropdown" data-options="is_hover:true">Dropdown Button</a>

<ul id="id01" data-dropdown-content class="f-dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>Code language: HTML, XML (xml)

七、分割按钮（Split Button）

使用 .split 类创建分割按钮，按钮主体和右侧下拉箭头分离，箭头部分绑定下拉菜单：

<button class="button split">
    Split Button
    <span data-dropdown="id01"></span>
</button>

<ul id="id01" data-dropdown-content class="f-dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>Code language: HTML, XML (xml)

点击左侧主体按钮可绑定独立操作，点击右侧箭头展开下拉菜单。

八、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 下拉菜单示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        .row {
            margin-top: 30px;
        }
    </style>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>基础下拉菜单</h3>
        <a href="#" data-dropdown="drop01" class="button dropdown">Dropdown Button</a>
        <ul id="drop01" data-dropdown-content class="f-dropdown">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

        <hr />

        <h3>大尺寸下拉菜单</h3>
        <a href="#" data-dropdown="drop02" class="button dropdown">Large Dropdown</a>
        <ul id="drop02" data-dropdown-content class="f-dropdown large">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

        <hr />

        <h3>带内边距的下拉菜单</h3>
        <a href="#" data-dropdown="drop03" class="button dropdown">Content Dropdown</a>
        <ul id="drop03" data-dropdown-content class="f-dropdown content">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

        <hr />

        <h3>左侧对齐下拉菜单</h3>
        <a href="#" data-dropdown="drop04" class="button dropdown" data-options="align:left">Left Align</a>
        <ul id="drop04" data-dropdown-content class="f-dropdown">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

        <hr />

        <h3>悬停触发下拉菜单</h3>
        <a href="#" data-dropdown="drop05" class="button dropdown" data-options="is_hover:true">Hover Me</a>
        <ul id="drop05" data-dropdown-content class="f-dropdown">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

        <hr />

        <h3>分割按钮</h3>
        <button class="button split">
            Split Button
            <span data-dropdown="drop06"></span>
        </button>
        <ul id="drop06" data-dropdown-content class="f-dropdown">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)

九、使用要点小结

功能	实现方式
创建下拉菜单	`<a data-dropdown="id">` + `<ul id="id" class="f-dropdown" data-dropdown-content>`
尺寸控制	`.tiny` `.small` `.medium` `.large` `.mega`
内边距	`.content`
展开方向	`data-options=”align:left
悬停触发	`data-options="is_hover:true"`
分割按钮	`.split` 类 + `<span data-dropdown="id">`
JS 初始化	`$(document).foundation()`

Previous: Foundation 图片组件（缩略图与清除灯箱）

Next: 折叠列表（Accordion）