Studio 編輯器：選單設計
7 分鐘
在 Studio 編輯器中，可以細部自訂選單的外觀和形象。開啟檢驗器面板，即可分別設計選單的各種狀態（例如浮動、已選擇），並調整填滿色彩、文字樣式、陰影等設定。
浮動互動
為選單新增浮動互動時，該效果不會顯現在平板和行動裝置上。若要在所有斷點顯示互動效果，可改為新增點擊式互動。
橫向選單設計
您可在檢驗器面板中，針對 3 種不同狀態設計橫向選單：固定、浮動及已選擇／目前頁面，為訪客提供更具互動性的導覽體驗。
請根據所選的預設格式，使用可用選項讓選單符合網站的外觀和形象。例如，部分橫向選單包含可自訂的按鈕或分隔線。
橫向選單設計步驟：
提示：
將橫向選單替換成漢堡選單，讓客戶的網站在較小畫面上呈現簡潔俐落的外觀。可在圖層面板中隱藏小型斷點的橫向選單，以及大型斷點的漢堡選單。
垂直選單設計
可針對 3 種不同狀態（固定、浮動和已選擇）設計垂直選單，讓訪客隨時了解目前所在的網站位置，以及即將選擇的項目。變更選單、子選單／下拉式選單和箭頭（如適用）的填滿色彩，並自訂文字、邊框、陰影等其他部分。
備註：
- 可用設定會依「新增元件」面板中選擇的特定選單而有所不同。
- 找不到「浮動」選項嗎？網站上的選單可能是舊版。了解如何更新至最新版選單體驗。
設計垂直選單：
- 選擇垂直選單。
- 點擊編輯器右上角的「開啟檢驗器」箭頭
。
- 向下捲動至「設計」。
- 選擇要設計的選單部分，再選擇狀態。
- 使用可用選項設計選單：
- 填滿色彩和不透明度：變更選單／子選單的背景色彩，並依喜好調整不透明度。若設計中包含箭頭，也可在此變更箭頭色彩。
- 框線：選擇選單框線的樣式，並調整寬度和色彩。
- 陰影：為選單新增陰影，並自訂角度、色彩、距離等設定。
- 文字：調整選單和子選單項目的樣式與格式。
- 間距：調整選單項目之間的垂直間距，以及文字和子選單的偏移量（單位為像素）。
提示：
您可將垂直選單釘選至頁面，讓訪客上下捲動時，選單持續浮動顯示。
設計錨點選單
在檢驗器面板中選擇預設格式，決定錨點選單要顯示的內容。可顯示文字、按鈕，或結合兩者的預設格式。其中一種預設格式甚至能在訪客捲動至特定區域時顯示錨點名稱。
接著可分別自訂兩種狀態的設計──固定和已點擊──讓訪客清楚知道目前正在查看哪個錨點。
設計錨點選單：
- 選擇錨點選單。
- 點擊編輯器右上角的「開啟檢驗器」箭頭 。
- 向下捲動至「設計」。
- 選擇頂端的預設格式。
- 選擇相關狀態：固定或已點擊。
- 使用可用選項設計選單：
- 填滿色彩和不透明度：變更選單／子選單的背景色彩，並依喜好調整不透明度。若設計中包含箭頭，也可在此變更箭頭色彩。
- 文字：調整選單和子選單項目的樣式與格式。
- 間距：調整選單項目之間的垂直間距，以及文字和子選單的偏移量（單位為像素）。
設計漢堡選單
漢堡選單包含多個可依需求設計的元件，包括選單本身、選單容器，以及用來開啟和關閉選單的圖示。
設計漢堡選單：
- 選擇漢堡選單。
- 選擇要設計的選單區域：
選單圖示
選單容器
實際選單
「關閉選單」按鈕
新增動畫套裝
網站上有新版選單嗎？可為項目新增動畫套裝。訪客在已上線網站上將游標移至項目時，便會播放動畫效果。
重要：
動畫套裝只能新增至新版選單。深入了解 Studio 編輯器中的新版選單。
若要新增動畫套裝：
- 在編輯器中選擇選單：
- 垂直和橫向選單：點擊選單。
- 漢堡選單：
- 點擊選單圖示。
- 選擇「編輯選單」。
- 點擊選單。
- 點擊「設定」圖示
。
- 選擇所需的動畫：
- 底線：選單項目下方會顯示底線。
- 洗刷：背景色彩會洗刷整個項目。
- 圓點：選單項目旁會顯現圓點。
- 波浪：背景色彩會以波浪效果填滿選單項目。
- 圓圈：背景色彩會從中央顯現，並向外擴散以填滿項目。
使用哪些色彩？
動畫中顯示的色彩取自項目在浮動狀態下的設計：
- 底線和圓點動畫會使用項目的文字色彩。
- 洗刷、波浪和圓圈動畫會使用背景填滿色彩。