创建自定义手风琴 - Webflow 帮助

如何添加下拉元素

下拉元素具有默认的内置操作，使其作为自定义手风琴非常有用——点击时打开下拉列表，点击其他元素或页面部分时关闭。

您可以通过转到添加面板 (A) > 元素 > 高级，然后将下拉元素拖到画布上来将其添加到您的网站。

如何更改默认下拉样式

要在自定义手风琴中使用下拉菜单，您需要更改默认的下拉元素样式。特别是，您需要调整宽度，以便下拉菜单完全填充其父元素的空间（即，持有自定义手风琴的任何元素）。

更改默认下拉样式的方法：

1. 在设计器画布上选择父下拉元素（在此示例中给定类为“手风琴项目”）
2. 转到样式面板 > 大小
3. 将宽度设置为100%

如何自定义下拉切换

现在，您需要自定义下拉切换，以便它完全填充其父元素，并在手风琴关闭时隐藏下拉列表中的内容。调整下拉切换的显示和高度属性：

1. 在画布上选择下拉切换并为其指定一个类（例如，“手风琴切换”）
2. 转到样式面板 > 布局
3. 将显示设置为弹性盒以填充水平空间
4. 将对齐设置为居中以垂直居中文本
5. 转到样式面板 > 大小
6. 设置一个高度值（例如，80px）

如何设计手风琴菜单

如果您预览网站并点击手风琴菜单，可能会注意到手风琴打开了，但默认内容覆盖了周围的内容。这是因为下拉列表的默认位置样式是绝对的。您需要更改它，以便内容扩展并移动周围的元素。

设计手风琴菜单的方法：

1. 选择父级下拉元素（例如，“手风琴项目”）
2. 点击“齿轮”图标打开下拉设置并显示菜单
3. 选择下拉列表元素
4. 转到样式面板 > 位置
5. 将位置设置为静态
6. 选择父级下拉元素（“手风琴项目”）
7. 转到样式面板 > 大小
8. 将溢出设置为隐藏

如何创建自定义动画

创建一个打开和关闭自定义手风琴的动画：

• 创建初始动作
• 动画手风琴打开
• 动画手风琴关闭

创建初始动作

您将从为手风琴创建两个初始动作开始。

对于下拉菜单：

1. 选择下拉元素（“手风琴项目”）
2. 转到交互面板 > 元素触发器并创建一个新的元素触发器
3. 选择下拉打开
4. 在菜单打开下选择一个动作
5. 在自定义动画下选择开始动画
6. 创建一个定时动画并命名（例如，“手风琴打开”）
7. 向动画添加一个动作：大小在杂项下
8. 设置为初始状态
9. 输入一个高度值（例如，80px）
10. 保存

对于切换图标：

1. 选择下拉元素中的图标
2. 给图标一个类（例如，“手风琴图标”）
3. 选择父级下拉元素
4. 打开交互面板
5. 选择下拉打开交互
6. 编辑定时动画（“手风琴打开”）
7. 选择图标（“手风琴图标”）
8. 添加动作：旋转在变换下
9. 设置为初始状态
10. 将z轴设置为0度
11. 保存

为手风琴打开添加动画效果

为打开手风琴和旋转图标：

1. 选择父级下拉菜单元素
2. 打开交互面板
3. 选择下拉菜单打开交互
4. 编辑定时动画（“手风琴打开”）
5. 添加动作：在杂项下选择尺寸
6. 取消勾选初始状态
7. 输入“auto”作为高度
8. 选择图标（“手风琴图标”）
9. 添加动作（在相同时间戳）：在变换下选择旋转
10. 设置z轴为180度
11. 保存

为手风琴关闭添加动画效果

为关闭添加动画：

1. 选择父级下拉菜单元素（“手风琴项”）
2. 打开交互面板
3. 选择下拉菜单打开交互
4. 在菜单关闭下选择动作
5. 选择开始动画
6. 创建定时动画并命名（例如，“手风琴关闭”）
7. 添加动作：在杂项下选择尺寸
8. 输入高度值（例如，80px）
9. 选择图标
10. 添加动作（相同时间戳）：在变换下选择旋转
11. 设置z轴为0度
12. 保存

返回 Webflow 帮助