設定導覽選單滑鼠移入自動展開
修改樣板程式碼,讓前台導覽選單在滑鼠移入時自動展開二層列表。
導覽選單自動展開功能說明¶
若您希望連結列表(選單)不需點擊、僅需將滑鼠移至該項目即可 自動展開二層列表內容,可以透過修改樣版編輯器的語法來達成。
以下是 連結列表自動下拉 的詳細說明與教學:
設定步驟(以拖拉版型為例)¶
編輯樣板檔案屬於進階操作,建議先備份版本後再進行修改。
- 進入路徑: 登入 CYBERBIZ 管理後台,前往 網站外觀 > 套版主題管理。
- 開啟編輯器: 在目前使用的版型上點選「選擇操作」並進入 CSS/HTML 編輯器。
- 搜尋檔案: 在編輯器左上角的搜尋欄位輸入
main_nav.liquid並點選開啟該檔案。 -
貼入語法: 於檔案的 第 2 行 貼入以下程式碼:
main_nav.liquid 2 3 4 5 6
<style> .dropdown:hover .dropdown-menu { display: block; } </style> -
儲存設定: 點擊「儲存」後即可在官網前台查看成果。
注意事項與恢復機制¶
- 責任歸屬: CYBERBIZ 提供開放的程式碼編輯權限供商家自行客製化,但官方 不提供現有文件外的語法教學、修改指導或代碼撰寫服務,建議由專業工程師進行操作。
- 恢復機制: 若修改後導致版面異常或跑版,可利用樣版編輯器內的 查看之前版本 按鈕 回溯至先前版本。
常見問題¶
為什麼我設定了卻沒有反應?
請檢查代碼是否被正確包裹在 <style> ... </style> 標籤內。此外,若您的版型有自訂 CSS 類別名稱(非標準 .dropdown),則需請工程師確認正確的選取器名稱。
自動展開後,選單會遮擋到下方的 Banner 嗎?
會的。下拉選單展開時會覆蓋在下方內容之上。建議確保您的二層選單長度適中,避免在滑鼠移入時造成大面積遮擋,影響使用者閱讀。
如何調整下拉選單出現的速度?
若希望展開動作更流暢,可在代碼中加入 transition 屬性,但這需要較進階的 CSS 知識。一般建議維持 display: block; 即可確保即時反應。
最後更新:2026-03-05

