跳轉到

設定導覽選單滑鼠移入自動展開

修改樣板程式碼,讓前台導覽選單在滑鼠移入時自動展開二層列表。

| 拖拉版型

導覽選單自動展開功能說明

若您希望連結列表(選單)不需點擊、僅需將滑鼠移至該項目即可 自動展開二層列表內容,可以透過修改樣版編輯器的語法來達成。

以下是 連結列表自動下拉 的詳細說明與教學:

設定步驟(以拖拉版型為例)

編輯樣板檔案屬於進階操作,建議先備份版本後再進行修改。

  1. 進入路徑: 登入 CYBERBIZ 管理後台,前往 網站外觀 > 套版主題管理
  2. 開啟編輯器: 在目前使用的版型上點選「選擇操作」並進入 CSS/HTML 編輯器
  3. 搜尋檔案: 在編輯器左上角的搜尋欄位輸入 main_nav.liquid 並點選開啟該檔案。
  4. 貼入語法: 於檔案的 第 2 行 貼入以下程式碼:

    main_nav.liquid
    2
    3
    4
    5
    6
    <style>
      .dropdown:hover .dropdown-menu {
        display: block;
      }
    </style>
    
  5. 儲存設定: 點擊「儲存」後即可在官網前台查看成果。

注意事項與恢復機制

  • 責任歸屬: CYBERBIZ 提供開放的程式碼編輯權限供商家自行客製化,但官方 不提供現有文件外的語法教學、修改指導或代碼撰寫服務,建議由專業工程師進行操作。
  • 恢復機制: 若修改後導致版面異常或跑版,可利用樣版編輯器內的 查看之前版本 按鈕 回溯至先前版本

常見問題

為什麼我設定了卻沒有反應?

請檢查代碼是否被正確包裹在 <style> ... </style> 標籤內。此外,若您的版型有自訂 CSS 類別名稱(非標準 .dropdown),則需請工程師確認正確的選取器名稱。

自動展開後,選單會遮擋到下方的 Banner 嗎?

會的。下拉選單展開時會覆蓋在下方內容之上。建議確保您的二層選單長度適中,避免在滑鼠移入時造成大面積遮擋,影響使用者閱讀。

如何調整下拉選單出現的速度?

若希望展開動作更流暢,可在代碼中加入 transition 屬性,但這需要較進階的 CSS 知識。一般建議維持 display: block; 即可確保即時反應。


最後更新:2026-03-05