如何在 Webflow 中編輯移動菜單

簡單直觀的導航菜單是您網站上最重要的設計元素之一。它就像一張地圖，引導您的訪問者超越主頁。隨著越來越多的人在他們的移動設備上使用互聯網，您的網站也應該有一個適合移動設備的導航菜單。

幸運的是，Webflow 使添加可折疊的漢堡菜單欄變得容易，這將簡化您的移動站點。繼續閱讀以了解如何在 Webflow 上編輯此移動菜單。

如何添加導航欄

在水平空間有限的情況下，漢堡菜單是一個重要的設計元素。它消除了對占用寶貴空間的笨重固定導航欄的需要。

在 Webflow 上，此菜單及其功能構建在 NavBar 元素內。將此元素添加到您的設計中需要四個簡單的步驟：

1. 點擊左側面板頂部的“+”圖標以打開“添加”面板。
   
2. 向下滾動到“組件”部分。
   
3. 單擊並按住“NavBar”元素。
   
4. 將該元素拖到頁面的頁眉。
   

如何編輯移動菜單

將導航欄添加到您的網站後，您可以通過多種不同的方式向此菜單添加樣式和個性。

如何向菜單添加更多鏈接

導航欄元素包含菜單按鈕和導航菜單，後者包含導航鏈接。當您將它添加到您的設計中時，將有幾個鏈接佔位符，您可以刪除或使用您的網站鏈接進行編輯。

按照以下步驟添加更多導航鏈接：

1. 單擊導航欄內的任何元素。
   
2. 前往右側的“元素設置”面板。
   
3. 按齒輪圖標打開“設置”。
   
4. 滾動到“導航欄設置”部分。
   
5. 點擊“添加鏈接”按鈕。
   

現在您的所有相關網站頁面都有足夠數量的鏈接，是時候進行實際鏈接了。

1. 選擇導航鏈接。
2. 轉到“元素設置”面板。
   
3. 找到“鏈接設置”部分。
   
4. 在“URL”字段中輸入指定的網頁 URL。
   

如何更改菜單動畫

在 Webflow 上，您還可以更改訪問者單擊菜單按鈕時移動菜單的顯示方式。您可以在三種類型的顯示動畫中進行選擇：

• 下拉——默認情況下，一旦訪問者點擊菜單按鈕，移動菜單就會從導航欄下拉。它將完全佔據瀏覽器窗口的寬度。
• Over Right – 如果您選擇此顯示動畫，您的移動菜單將出現在屏幕的右側。該菜單將佔據整個瀏覽器窗口的高度。
• Over Left – 此菜單類型與 Over Right 相同，只是導航菜單將從屏幕左側移動。

要設置所需的顯示動畫，請執行以下操作：

1. 選擇導航欄內的任何元素。
   
2. 轉到屏幕右側的“元素設置”面板。
   
3. 點擊齒輪圖標啟動“設置”。
   
4. 導航到“導航欄設置”部分。
   
5. 單擊“類型”選項。
   
6. 從下拉菜單中選擇首選樣式。
   

在“導航欄設置”部分，您還可以控制以下內容：

• 緩動打開：用於動畫打開過渡的曲線類型。
• Easing close：用於動畫關閉過渡的曲線類型。
• 持續時間：菜單出現需要多長時間。

請注意，過渡持續時間以毫秒為單位。

如何更改菜單樣式

Webflow 使導航欄的任何部分的樣式變得容易，使您可以將移動菜單無縫地融入您的網站設計。

要設置菜單按鈕的樣式，請執行以下操作：

1. 選擇菜單按鈕。
   
2. 轉到右側的“樣式”面板（畫筆圖標）。
   

樣式面板允許您更改菜單按鈕的各個方面。最常見的是，設計師會更改按鈕的背景顏色和大小。

要更改背景顏色，請執行以下操作：

1. 轉到“背景”部分。
   
2. 點擊顏色下拉圖標以打開“顏色選擇器”。
   
3. 選擇所需的顏色。
   

如果您想更改漢堡包圖標的大小，請按照下列步驟操作：

1. 導航到“排版”部分。
   
2. 增大或減小“Aa”字段中的圖標大小。
   

您還可以在上面的字段中更改圖標的顏色，用字母 A 和一個顏色滴標記。

雖然自定義菜單按鈕的方法有很多，但您不能將其替換為文本元素或自定義圖像。

移動導航變得簡單

在設計移動菜單時，您希望充分利用相當有限的空間。因此，盡量不要讓選項溢出菜單，以免讓訪問者感到困惑。此外，確保菜單選項簡短、清晰且易於閱讀。

之後，您可以嘗試菜單樣式和動畫，讓訪問者對每一步都感興趣。

您是否嘗試過向您的網站添加移動菜單？你包括了多少選項？請在下面的評論部分告訴我們。