如何在 Webflow 中編輯移動菜單

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

幸運的是，Webflow 可以輕鬆添加可折疊的漢堡菜單欄，從而簡化您的移動網站。繼續閱讀以了解如何在 Webflow 中編輯此移動菜單。

如何添加導航欄

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

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

• 點擊左側面板頂部的“+”圖標以打開“添加”面板。

• 向下滾動到“組件”部分。

• 按住 NavBar 元素。

• 將元素拖到頁眉。

如何編輯移動菜單

將導航欄添加到您的網站後，您可以通過幾種不同的方式來設計和個性化此菜單。

如何向菜單添加更多鏈接

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

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

• 單擊導航欄中的任何項目。

• 轉到右側的元素設置面板。

• 點擊齒輪圖標打開“設置”。

• 滾動到導航欄設置部分。

• 單擊“添加鏈接”按鈕。

現在您已經為網站上的所有相關頁面提供了足夠的鏈接，是時候進行實際鏈接了。

• 選擇一個導航鏈接。
• 轉到元素設置面板。

• 找到鏈接設置部分。

• 在“URL”字段中輸入指定的網頁 URL。

如何更改菜單動畫

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

• 下拉菜單 – 默認情況下，當訪問者單擊菜單按鈕時，移動菜單會從導航欄中退出。它將佔據瀏覽器窗口的整個寬度。
• 右 – 如果您選擇此展開動畫，您的移動菜單將出現在屏幕右側。此菜單將佔據瀏覽器窗口的整個高度。
• 左上方 – 這種類型的菜單與右上方菜單相同，只是導航菜單從屏幕左側移動。

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

• 選擇導航欄中的任何項目。

• 轉到屏幕右側的元素設置面板。

• 點擊齒輪圖標以啟動設置。

• 轉到“導航欄設置”部分。

• 單擊“類型”選項。

• 從下拉菜單中選擇您喜歡的樣式。

在導航欄設置部分，您還可以管理以下內容：

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

請注意，轉換的持續時間以毫秒為單位。

如何更改菜單樣式

Webflow 使導航欄的任何部分都可以輕鬆設置樣式，從而可以輕鬆地將移動菜單合併到您的網站設計中。

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

• 選擇菜單按鈕。

• 轉到右側的樣式面板（畫筆圖標）。

樣式面板可讓您更改菜單按鈕的各個方面。大多數情況下，設計師會更改按鈕背景的顏色和大小。

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

• 轉到“背景”部分。

• 觸摸顏色下拉圖標以打開顏色選擇器。

• 選擇你想要的顏色。

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

• 轉到排版部分。

• 增大或減小 Aa 字段中圖標的大小。

您還可以更改上面框中圖標的顏色，標有 A 和一團顏色。

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

移動導航變得簡單

在設計移動菜單時，您希望充分利用相當有限的空間。因此，盡量不要讓菜單中的選項過多，以免混淆訪客。此外，請確保菜單項簡短、清晰且易於閱讀。

之後，您可以使用菜單的樣式和動畫，讓您的訪問者在每一步都參與進來。

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