量身訂製的選擇面板

Webflow 提供現成的選擇功能，您可以輕鬆地將其放置在導覽列或網頁的任何部分。這使您能夠快速製作客製化的選擇面板。

儘管如此，對於那些希望在構建、樣式化和處理選擇面板方面擁有更多權威的人來說，本教程將指導您建立個性化的選擇面板！

先決條件

• 你將利用 塊元素 製作個人化選擇組件
• 你將插入一些 錨元素 在選擇內容容器內
• 您還將僱用 行動 使選擇面板發揮作用 - 啟動時打開和關閉

在本教程中

要建立自訂的選擇面板，您將：

1. 建立選擇容器
2. 開發選擇觸發器
3. 構造選擇內容容器
4. 啟動切換選擇面板的操作

建立選擇容器

1. 整合您的初始 塊元素 來自 新增元素 部分。
2. 分配一個 班級 姓名。這將被稱為“選擇包裝器”。
3. 指定一個 寬度 方面
4. 調整 位置 到： 相對的 ——這有利於即將出現的「選擇內容」容器的絕對定位。

發現更多： 定位見解

設計建議
設定固定寬度時，請確保將 max-width 限制在 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. 消除 底線（文字修飾）為 None 消除連結下劃線

挖掘更多見解

• 文字樣式繼承
• HTML 標籤

建立切換選擇的操作

建立一個在指定元素選擇時觸發的動作，在滑鼠點擊（或點擊）時發生。要構造這個：

1. 選擇選擇觸發器
2. 發起一個動作： 元素觸發：滑鼠點擊（點擊）

然而，我希望在懸停而不是單擊時切換我的選擇面板

即將推出的動畫將是相同的，但此時，選擇 選擇包裝器 並選擇 元素觸發：滑鼠懸停。隨後，繼續執行以下步驟。

揭曉選擇

1. 在下面 第一次點擊時 （或者 懸停時），建立一個新的 卡通。將其命名為“選擇開啟”。
2. 選擇您的選擇內容區塊元素
3. 啟動初始 動畫動作：尺寸
4. 設定 高度為零 (0 px)。鑑於溢出隱藏在選擇內容上，它會悄悄消失。
5. 將此指定為 初始狀態 防止頁面載入時出現選擇內容
6. 建立後續的 動畫動作：尺寸
7. 指定 高度為自動 — 手動在欄位中輸入“auto”並按 Enter 鍵。或者，點擊該欄位旁邊的單位，然後從單位清單中選擇自動。

隱藏選擇

1. 下面 第二次點擊時 （或者 懸停時），整合一個新的定時 卡通。將其標記為選擇關閉。
2. 選擇選擇內容
3. 制定一個 動畫動作：尺寸
4. 恢復 高度 回到 0 像素

必須了解
您可以調整任何動畫操作的緩動和持續時間，以在選擇切換期間創建獨特的動畫。 

‍

繼續前進

現在您已經掌握了創建個人化選擇面板的能力，您可以擴展這種方法來製作更複雜的元素，例如 擴充模組 非常適合常見問題解答.

參考

• 安裝擴充模組
• 建立互動式選擇箭頭