創建自定義手風琴 - 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 幫助