量身定制的选择面板

Webflow 提供现成的选择功能，您可以轻松地将其放置在导航栏或网页的任何部分。这使您能够快速制作自定义选择面板。

然而，对于那些希望在构建、设计和处理选择面板方面拥有更多权限的人来说，本教程将指导您构建个性化的选择面板！

先决条件

• 您将利用 块元素 制作个性化选择组件
• 你会插入一些 锚元素 在选择内容容器内
• 你还将雇用 行动 使选择面板能够运行——激活时打开和关闭

在本教程中

要创建定制的选择面板，您需要：

1. 建立选择容器
2. 开发选择触发器
3. 构造选择内容容器
4. 启动切换选择面板的操作

建立选择容器

1. 整合您的初始 块元素 来自 添加元素 部分。
2. 分配一个 班级 名称。这将被称为“选择包装器”。
3. 指定 宽度 方面
4. 调整 位置 到： 相对的 — 这有助于即将到来的“选择内容”容器的绝对定位。

发现更多： 关于定位的见解

设计建议
设置固定宽度时，请确保将最大宽度限制在 100% 或以下。这样，您就可以防止元素在较小的设备上超出宽度。相反，您可以将宽度设置为 100%，将最大宽度设置为特定值，如 500px 或 1200px。这可确保文本行不会在较大的屏幕上拉伸，或图像不会超出其原始清晰度。

开发选择触发器

1. 插入第二个 块元素 在选择包装器内 - 在 航海家 因为选择包装器缺少画布高度。
2. 应用 班级 到这个块元素。我们将其命名为“选择触发器”。
3. 放下 文本元素 进入选择触发器。双击即可修改文本。
4. 添加风格化，例如 背景阴影 （或图案或渐变）到选择触发块元素
5. 通过添加一些来为文本提供间距 填充

结构提示
您可以在选择触发器中包含各种内容。您甚至可以将其留空。例如，您可以插入一个图标或另一个表示“关闭”的文本元素。

优化悬停状态并改变触发器的光标外观

您可以增强 悬停状态 选择触发器来吸引用户在悬停时点击。

探索更多: 风格化状态

也许您认为在选择悬停期间典型的鼠标光标看起来很奇怪。您可以选择修改 光标类型 在触发器块元素内使用。对于链接，通常首选指针光标。或者，可以选择任何光标类型。

了解更多： 指针

锻造选择内容容器

1. 插入新鲜的 块元素 就在选择包装器内，并将其放置在选择触发器下方。
2. 定义一个 班级 命名下拉内容
3. 确保 位置是绝对的 — 这可以防止所选内容取代页面上的其他内容
4. 设置 宽度至100% 占据选择包装器内所有可访问的空间
5. 设置 溢出到隐藏 — 这在以后设置动作时非常有用
6. 包括一个 背景阴影 如果需要的话

了解更多： 溢出

整合内容

内容可以变化。这里将纳入一些锚元素。

1. 披上 锚元素 从面板中将其放置在您选择的内容容器内
2. 属性a 班级 到锚元素。我们将其表示为“下拉链接”，但您可以插入任何所需的名称。
3. 调整 显示设置以阻止 填充选择内容容器的整个宽度
4. 适用制服 填充 按住 Shift 键并拖动，即可在四边
5. 插入 文本元素 进入你的锚元素
6. 复制 锚元素 并多次粘贴以满足您选择的所需链接
7. 双击每个 文本元素 重命名每个选择链接
8. 锚 每个锚元素对应相关资源

参考： 我们关于配置各种链接元素的链接设置的指南

自定义链接文本

链接继承了 所有链接 标签。因此，修改嵌套在锚元素中的文本元素不会覆盖 所有链接 文本样式。要设置锚点元素内文本的样式，必须设置锚点元素本身的排版样式。

1. 选择 锚元素 （下拉链接）
2. 改变 文字色调
3. 消除 下划线（文字修饰）为无 消除链接下划线

发掘更多见解

• 文本样式继承
• HTML 标签

建立切换选择的操作

创建一个在鼠标单击（或点击）时触发的操作，该操作由指定元素选择时触发。构造方法如下：

1. 选择选择触发器
2. 发起操作： 元素触发：鼠标单击（点击）

然而，我希望在悬停时切换选择面板，而不是单击

即将推出的动画将是相同的，但在这个时刻，选择 选择包装器 并选择 元素触发：鼠标悬停.随后，继续以下步骤。

揭晓选择

1. 在下面 第一次点击 （或者 悬停时）建立新的 动画片. 将其命名为选择打开。
2. 选择您选择的内容块元素
3. 启动初始 动画动作：大小
4. 设置 高度为零 (0 px)。由于溢出隐藏在选择内容中，因此它会悄悄地消失。
5. 指定为 初始状态 防止选择内容在页面加载时出现
6. 创建后续 动画动作：大小
7. 指定 高度为自动 — 手动在字段中输入“自动”并按回车键。或者，点击字段旁边的单位并从单位列表中选择自动。

隐藏选择

1. 下面 第二次点击 （或者 悬停时）集成新的定时 动画片. 将此标记为选择关闭。
2. 选择选择内容
3. 制定 动画动作：大小
4. 恢复 高度 回到 0 像素

必须理解
您可以调整任何动画动作的缓和和持续时间，以在选择切换期间创建独特的动画。 

‍

继续前进

现在您已经掌握了创建个性化选择面板的方法，您可以扩展此方法来制作更复杂的元素，例如 扩展模块 非常适合常见问题解答.

参考

• 安装扩展模块
• 建立交互式选择箭头