手機螢幕只有巴掌大，桌機版那排橫向選單塞進來，連結變得又小又擠，手指根本點不準。WordPress 多數佈景主題會在小螢幕自動把選單收進一個「三條線」的圖示，這就是行動版漢堡選單。問題是，主題內建的那顆漢堡通常長得很陽春：圖示顏色跟品牌不搭、點開沒有任何動畫、展開的選單窄窄一條擠在角落，使用體驗跟你精心設計的桌機版差了一截。

行動版漢堡選單客製不只是換個圖示顏色而已。它牽涉到三個層次：圖示本身的外觀與「漢堡變叉叉」的開關動畫、選單展開時的動態效果，以及要不要做成蓋滿整個畫面的全螢幕選單。這篇會把這三層拆開講清楚，從「用外掛點一點就好」到「自己寫 CSS 與 JavaScript 完全掌控」兩條路都涵蓋，並補上多數教學略過的無障礙與效能細節。讀者讀完能自己判斷哪條路適合自己的網站，並動手把漢堡選單調成想要的樣子。

行動版漢堡選單到底在客製什麼

漢堡選單客製的核心，是把「圖示外觀」「開關動畫」「展開形式」這三件事分開處理。很多人卡住，是因為把它們混為一談。

圖示外觀指的是那三條橫線的顏色、粗細、間距與擺放位置（左上或右上）。開關動畫指的是點下去之後，三條線怎麼變化——最常見的是中間那條淡出、上下兩條旋轉交叉成一個叉叉（X），暗示「再按一次就關閉」。展開形式則決定選單從哪裡冒出來、佔多少空間：可以是從上往下推開、從側邊滑入的抽屜式（off-canvas），或是直接蓋滿整個螢幕的全螢幕覆蓋層（overlay）。

這三層各自獨立，可以自由組合。你可以只換圖示顏色、保留主題原本的展開方式；也可以圖示完全照舊，只把展開形式改成全螢幕。把需求拆到這個顆粒度，後面選工具、寫程式才不會做白工。

行動版才需要漢堡選單，是因為桌機有足夠寬度平鋪所有選項。所以無論用哪種方法，客製都離不開一個「響應式斷點」（responsive breakpoint）的概念：螢幕寬度小於某個值（常見落在 768px 上下）時顯示漢堡，大於它時顯示完整橫向選單。斷點設在哪，取決於你的選單項目數量與主題版型，後面會再談。

該用外掛還是自己寫程式

先給結論：不熟程式、只想要能動又好看，用外掛；想要完全掌控外觀與行為、或不想為了一顆選單多裝一個外掛拖慢網站，自己寫 CSS 加 JavaScript。兩條路沒有絕對優劣，差別在掌控度與維護成本。

外掛的優點是幾乎零程式碼，後台點選就能改顏色、字體、動畫方向。以全螢幕選單為例，FullScreen Menu 這類外掛安裝啟用後，在設定頁就能勾選啟用、挑漢堡圖示顏色與選單背景色、選擇動畫進場方向（由上往下、由左往右、由右往左），還能加上社群圖示與搜尋列。Max Mega Menu 則更全面，免費版就支援自訂響應式斷點、設計切換列（toggle bar）上漢堡圖示的位置、選擇標準或帶動畫的開關圖示，以及側滑式（slide left/right）的行動選單，付費版再補上黏性選單、垂直選單與 WooCommerce 整合。這類外掛適合不想碰程式、又希望快速上線的情境。

外掛的代價是：多一個外掛就多一份載入負擔與潛在相容性風險，而且你的選單外觀被限制在它提供的選項裡，要做超出範圍的細節調整反而綁手綁腳。自己寫程式則完全相反——掌控度百分之百，不增加外掛，但你得會改佈景主題的樣板、寫媒體查詢（media query）與一小段 JavaScript，且務必在子主題（child theme）裡改，否則主題一更新你的修改就被覆蓋掉。

還有第三條路常被忽略：如果你用的是區塊主題（block theme，採用全站編輯 FSE），導覽（Navigation）區塊本身就內建行動版的開合行為與覆蓋層樣式，許多調整可以直接在網站編輯器裡完成，不必裝外掛也不必寫死在樣板。先確認自己的主題屬於哪一類，再決定走哪條路，能省下不少冤枉工。

漢堡圖示與動畫怎麼用純 CSS 做出來

漢堡圖示不要用 PNG 或 JPG 圖檔，因為點陣圖沒辦法做變形動畫。正確做法是用 HTML 元素加 CSS 畫出三條線，或用 SVG，這樣才能讓它平滑地變成叉叉。

最省事的畫法是一個 span 元素搭配它的 before 與 after 兩個偽元素，三者都設定成同寬、高 2 至 3px 的白色（或品牌色）長條，靠定位把它們排成上中下三條。這樣只用一個元素就生出三條線，不必塞三個 div。

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  position: absolute;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}
.hamburger-icon::before { content: ""; top: -8px; }
.hamburger-icon::after  { content: ""; top: 8px; }

關鍵在最後那行 transition。它告訴瀏覽器：之後只要這些線的位置、角度、透明度有變化，就用 0.3 秒平滑地過渡，而不是瞬間跳過去。漢堡變叉叉的「動畫感」就是這行給的。

接著定義「打開」狀態。做法是用 JavaScript 在點擊時對外層按鈕切換一個類別（class，例如 is-open），再讓 CSS 針對這個類別改變三條線：上下兩條各旋轉 45 度交叉成叉叉、中間那條用透明度或縮放藏起來。

.is-open .hamburger-icon { background-color: transparent; }
.is-open .hamburger-icon::before { top: 0; transform: rotate(45deg); }
.is-open .hamburger-icon::after  { top: 0; transform: rotate(-45deg); }

旋轉用的是 CSS 的 transform: rotate() 函式，配合前面設好的 transition，三條線就會在 0.3 秒內優雅地旋轉、交疊成一個叉叉。要讓動畫看起來自然，過渡函式（transition-timing-function）建議用 ease 或 ease-in-out，它會頭尾慢、中間快，比等速的 linear 更像真實物體的運動。時間別拉太長，0.2 到 0.35 秒是手感最好的範圍，超過 0.5 秒會讓使用者覺得選單「反應慢」。

至於切換類別的 JavaScript，核心其實只有一行：監聽按鈕的點擊事件，切換 is-open 類別。

const toggle = document.querySelector('.hamburger-toggle');
const body = document.body;
toggle.addEventListener('click', () => {
  toggle.classList.toggle('is-open');
  body.classList.toggle('menu-open');
});

在 WordPress 裡，這段 JavaScript 應該存成獨立的 .js 檔放進（子）主題，再用 functions.php 裡的 wp_enqueue_script() 正確載入，不要直接寫死在樣板的 script 標籤裡，那樣不利於快取與維護。

全螢幕展開選單怎麼做才好用

全螢幕選單是讓覆蓋層蓋滿整個視窗、選項置中放大。它最適合選單項目多、有子選單，或想做出強烈視覺風格的網站。但「蓋滿螢幕」這件事有幾個容易踩雷的細節，做不好反而比窄窄一條的抽屜選單更惱人。

覆蓋層本身用一個固定定位的容器，寬高各 100%，預設藏起來、打開時才顯示。藏與顯不要直接用 display: none 切換，因為 display 沒辦法做過渡動畫，會讓選單硬生生彈出。改用 opacity 配合 visibility，或用 transform 把它推到畫面外，才能搭配 transition 做出淡入或滑入效果。

.fullscreen-menu {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-open .fullscreen-menu {
  opacity: 1;
  visibility: visible;
}

第一個容易被略過的細節是背景捲動鎖定。選單蓋滿螢幕時，使用者若還能滑動後面的頁面，會非常出戲。解法是在打開選單時，對 body 加上 overflow: hidden（前面 JavaScript 切換的 menu-open 類別正好派上用場），關閉時再拿掉。

第二個是離開的方式要明確。全螢幕選單一定要給一顆清楚的關閉按鈕，慣例放在右上角，並讓原本的漢堡圖示變成叉叉提示「按這裡關閉」。如果選單沒蓋滿、留了一點頁面在旁邊，也應該允許點擊空白處關閉。

第三個是子選單的處理。手機沒有滑鼠的滑過（hover）動作，桌機那種「滑過展開下一層」在手機上完全失效。子選單要改成「點一下展開、再點一下收合」，並用箭頭圖示提示這一項底下還有東西，否則使用者根本不知道可以往下鑽。

客製漢堡選單時最常被漏掉的無障礙細節

多數教學寫到「點了會動」就收工，但一顆合格的漢堡選單必須讓螢幕報讀軟體與鍵盤使用者也能操作，這同時是無障礙要求，也是 Google 看重的使用體驗訊號。

漢堡按鈕本身要用 button 元素，不要用沒有語意的 div 或一個連到 # 的空連結。按鈕要加上 aria-label（例如「開啟選單」），讓看不到圖示的使用者知道這顆按鈕的用途。它還要有 aria-expanded 屬性，預設 false、選單打開時用 JavaScript 改成 true，這樣螢幕報讀軟體才會念出「已展開」或「已收合」。

<button class="hamburger-toggle" aria-label="開啟選單" aria-expanded="false">
  <span class="hamburger-icon"></span>
</button>

鍵盤操作也要顧到。選單打開後，焦點（focus）最好移進選單第一個連結，使用者按 Tab 能逐項瀏覽，按 Esc 能關閉。這幾個行為在前面那段 JavaScript 裡多加幾行就能補上，成本不高，卻能讓相當比例的使用者受惠。

還有一個常被忽略的偏好設定是「減少動態效果」。部分使用者在系統裡開了減少動畫的選項（前庭功能敏感者尤其需要），這時華麗的旋轉與滑入反而造成不適。用 prefers-reduced-motion 媒體查詢偵測這個偏好，在偵測到時把過渡時間縮到極短或直接關掉動畫，是現行的良好實務。

@media (prefers-reduced-motion: reduce) {
  .hamburger-icon,
  .hamburger-icon::before,
  .hamburger-icon::after,
  .fullscreen-menu {
    transition: none;
  }
}

響應式斷點與 WooCommerce 商店的額外考量

斷點要設在「桌機橫向選單剛好擠不下」的那個寬度，而不是套一個別人說的數字。實務上 768px 是常見起點，但若你的選單項目特別多、或項目文字較長，可能在更寬的螢幕（例如 900px 到 1024px）就已經擠成兩行，這時斷點要往上調，讓漢堡提早接手。判斷方法很簡單：把瀏覽器視窗慢慢縮窄，看橫向選單在哪個寬度開始換行或重疊，斷點就設在那附近。

台灣讀者的裝置以中高階手機與平板為主，直式手機常見邏輯寬度落在 360px 到 430px、平板則到 768px 以上，因此把行動選單的測試範圍涵蓋到大尺寸手機與小平板，比只測一支手機更能反映真實流量。

如果你的網站是 WooCommerce 商店，行動版頂列除了漢堡圖示，通常還要並排一顆購物車圖示，甚至搜尋與帳號入口。這時要注意三件事。第一，漢堡與購物車兩顆圖示的點擊區域都要夠大、彼此間距足夠，避免手指誤觸。第二，全螢幕選單打開時要確認購物車圖示與數量徽章不會被覆蓋層蓋掉、或反過來蓋住關閉按鈕，必要時用 z-index 排好層級。第三，把分類入口放進選單時，層級不要太深；行動購物的決策很快，超過兩層的子選單會讓人放棄點下去。本文只談選單與圖示的呈現，購物車後續的結帳與收款流程屬於另一個主題，這裡不展開。

漢堡選單也不是萬靈丹。把所有導覽都藏進一顆圖示，等於要求使用者多點一下才看得到選項，重要的入口（例如「商品」「優惠」）若流量很關鍵，可以考慮拉到漢堡外面當常駐按鈕，其餘次要連結再收進選單。客製的目的不是把東西藏得更漂亮，而是讓使用者更快找到他要的東西。

從一顆陽春圖示到順手好用的行動選單，下一步怎麼走

行動版漢堡選單客製，本質上是把「圖示外觀、開關動畫、展開形式」三層分開處理，再依自己的程式能力選一條路：想快就用 FullScreen Menu、Max Mega Menu 這類外掛後台點選；想完全掌控就在子主題裡用 CSS 畫圖示、用 transform 做漢堡變叉叉、用 JavaScript 切換類別，並記得把 JavaScript 用 wp_enqueue_script() 正確載入。全螢幕選單要補上背景捲動鎖定、明確的關閉按鈕與可點擊展開的子選單；無障礙的 aria 屬性、鍵盤操作與 prefers-reduced-motion 則是讓選單從「能動」變成「好用」的關鍵。

先打開自己的網站，把瀏覽器縮到手機寬度，誠實看一眼現在那顆漢堡：圖示醜不醜、點開有沒有反應、展開的選單好不好點。找出最礙眼的那一層先改它——通常從圖示顏色與一段 0.3 秒的開關動畫下手，投報率最高，也最快看到網站質感不一樣。