在 CSS 選擇器上顯示選單

操作指南 所有方案 1 分鐘閱讀

應用程式會將您的選單放進每個相符元素的內部，並取代其內容。適用於 Automatically replace（自動取代）和 Replace existing menu（取代現有選單）都無法使用的自訂或大幅修改過的佈景主題、特定位置，或只在桌面裝置或只在行動裝置顯示的選單。

注意

應用程式建議開發人員使用此選項，或在其他選項無法使用時使用。不熟悉 CSS 選擇器嗎？聯絡我們，我們會免費為您安裝選單。

設定 CSS 選擇器

1. 選擇在此 CSS 選擇器上顯示選單

   在選單編輯器中，點擊左側欄的 Settings（設定）分頁。在 Position（位置）下選擇 Show menu on this CSS selector（在此 CSS 選擇器上顯示選單）。

   

   Show menu on this CSS selector 及其兩個選擇器欄位

2. 輸入選擇器

   填寫設定中說明的兩個欄位。灰色的 #SiteNav 和 #AccessibleNav 是預留位置文字，不是已儲存的值。

3. 儲存並發佈

   點擊 Save（儲存），然後發佈選單。請在桌面裝置與行動裝置上檢查您的網路商店。

設定

CSS selector of your main menu（主選單的 CSS 選擇器）

放置桌面裝置選單的元素，例如 #SiteNav、.header__inline-menu 或 nav.main-menu。留空即可只在行動裝置上顯示選單。

CSS selector of your mobile menu（行動版選單的 CSS 選擇器）

放置行動裝置選單的元素，例如 #AccessibleNav 或 .menu-drawer。留空即可保留佈景主題的行動版選單（只在桌面裝置顯示）。

• 多個元素：以逗號分隔選擇器，例如 .header__inline-menu, .sticky-header nav。選單會放進每個相符的元素。
• 兩種版面使用同一個元素：在兩個欄位中輸入相同的選擇器。應用程式會依螢幕大小在桌面版與行動版版面之間切換。
• 選擇容器，而不是單一連結：比對包住整個選單的元素（通常是 <nav> 或 <ul>），否則選單會跑進某一個項目裡。
• 優先使用穩定的選擇器：ID 或佈景主題的 class，例如 .header__inline-menu。像 body > div:nth-child(3) > … 這種自動產生的選擇器，在佈景主題變更時就會失效。

找出 CSS 選擇器

您也可以點擊欄位下方的 How to find CSS selector of your menu?（如何找出選單的 CSS 選擇器？）。

1. 檢查選單

   在 Chrome 中開啟您的商店，在選單上按右鍵並選擇 檢查。

2. 找出選單容器

   在 Elements 面板中，將游標移到各個標籤上。找出醒目標示範圍涵蓋整個選單、且最接近的 <nav> 或 <ul>。

3. 複製選擇器

   使用 # 加上它的 id（#SiteNav），或 . 加上清楚的 class（.header__inline-menu）。否則，在標籤上按右鍵，選擇 Copy > Copy selector，然後貼到應用程式中。

4. 對行動裝置重複操作

   點擊 DevTools 中的裝置圖示，選擇一款手機並開啟行動版選單（漢堡圖示）。重複上述步驟取得行動版選擇器。

提示

儲存前先測試選擇器：在 DevTools 的 Console 中執行 document.querySelectorAll('your-selector')。如果傳回空的清單，表示選擇器有誤。

想把選單放在佈景主題完全沒有選單的地方嗎？請參閱新增自訂選單位置。

相關頁面

• 新增自訂選單位置在佈景主題程式碼中加入自己的容器，讓選單顯示在您想要的位置。
• 桌面裝置和行動裝置可以使用不同的選單嗎？在桌面裝置顯示一個選單、在行動裝置顯示另一個，或依裝置隱藏部分項目。
• 為什麼我的選單沒有顯示在商店上？選單沒有出現在網路商店或顯示不正確時的逐步檢查清單。

這個頁面有幫助嗎？

回報問題