Mega Menu

功能介紹

該功能用於配置導航欄的各項設置。

• 設置

• 自定選單項目

• 主選單順序編輯

設定

2.1 基礎設定

Mega Menu​請至後台JIKA -> Mega Menu​ -> 設定

• 啟用： 設定為「是」以啟動高階選單功能。

• 啟用固定選單： 使用此設定選擇應在哪些設備中顯示高階選單。您可以選擇行動裝置、電腦桌面裝置，或同時啟用兩種。設定後，該終端頁面中的進階選單可固定在。。

• 行動選單標題 ： 在此設定中指定選單的標題。請注意，標題長度限制為 17個字元。

• 隱藏分類的“查看全部”連結： 設定為「是」時，第二層級類別標題將變為可點擊。設定為「否」時，有第三層級類別時，第二層級類別下會顯示 “查看全部[分類名]”，可點擊進入該層級分類詳情頁（如下圖）。

• 行動版視圖模板： 指定行動裝置視圖的模板。您可以選擇「下鑽式」或「手風琴」。

• 顯示進階選單圖示於： 選擇可顯示進階選單圖標的設備。您可以選擇行動裝置、電腦桌面裝置，或同時啟用兩種設備。

• 啟用幫助與設定標籤： 啟用後，此選項卡會出現在移動裝置的個人中心。

• 標籤自訂名稱： 您可以在此處自訂「幫助和設定」標籤的名稱。

• 行動選單寬度(px)： 設定行動裝置螢幕尺寸。

例，設置為1400時，螢幕寬度超過1400顯示桌面裝置樣式，小於等於1400顯示移動裝置樣式。

2.2 顔色設定

• 配色方案模板： 選擇其中一個現成的範本（“綠色”、“深色”、“淺色”）或選擇自訂來手動調整顏色。

• 主選單背景顏色： 設置主選單背景顏色

• 主選單背景懸停顏色： 設置主選單背景懸停顏色

• 主選單文字顏色： 設置主選單文字顏色

• 主選單文字懸停顏色： 設置主選單文字懸停顏色

• 子選單背景顏色： 設置子選單背景顏色

• 子選單背景圖片： 設置子選單背景圖片

• 子選單文字顏色： 設置子選單文字顏色。若子選單下有第三級選單，代碼會自動處理該顔色為第二級選單文字顔色的加深版。

• 子選單文字懸停顏色： 設置子選單文字懸停顏色

• 目前類別文字顏色： 設置點擊分類後，類別文字顯示的顏色

• 關閉和切換按鈕顏色： 設置關閉和切換按鈕顏色

• 漢堡按鈕顏色： 設置漢堡按鈕顏色

配置範例如下：

自定選單項目

3.1 新增自定項目

3.1.1 基礎設定

請至後台JIKA -> Mega Menu​ -> 自訂選單項目

• 標題： 選單名稱

• URL Key： 您可選擇內部 URL、外部 URL 或 CMS 頁面。

  • 内部URL：指向網站內部的連結。

• 外部URL：指向任意外部網站（如下圖設置，點擊”Google“可跳轉至Google搜索頁）

• CMS頁面：選擇已存在的CMS頁面。

• 狀態： 選擇可顯示該選單的設備。您可以選擇行動裝置、電腦桌面裝置，或同時啟用兩種設備。

• 選單標簽文字： 顯示於選單名稱上的標簽名

• 標簽文字顔色（十六進位）： 設置標簽文字的顔色

• 標簽背景顔色（十六進位）： 設置標簽背景的顔色

3.1.2 内容（僅適用於桌面版）

• 進階選單字體： 選擇字體樣式（正常或粗體）

• 顯示為單一選單項： 開啓後，無法編輯子選單寬度和内容

• 子選單寬度： 您可以選擇全寬/自動/自定。選擇「自定」後將顯示**寬度 (px)**設置項，填入預期數字。

• Content： 設置自定選單的内容

3.1.3 内容（行動裝置）

創建自定選單時沒有該選項，創建成功後，於自定選單中設置

進階選單字體： 配置行動裝置的選單字體，您可以選擇粗體或者正常。

3.2 刪除自定項目

在自定選單項目中勾選準備刪除的項目，點擊，在下拉選單中點擊“刪除”。

於確認彈框中點擊“OK”

顯示成功刪除選單項目信息“總共有 1 條記錄被刪除。”，選單列表中不再顯示已刪除項目。

前臺不再顯示已刪除選單

主選單順序編輯

使用簡單的拖放功能，您可以輕鬆調整每個分類的位置。

產品分類中的高級選單設定

5.1 進階選單（電腦桌面裝置）

路徑：目錄--選擇分類--進階選單（電腦桌面裝置）

• 進階選單字體： 可選粗體或者正常

• 選單標籤文字： 選單標簽名

• 標籤背景顏色（十六進位）： 標籤的背景顔色

• 標籤文字顏色（十六進位）： 標籤的文字顔色

• 進階選單圖標： 從圖庫或個人媒體檔案上傳自訂選單項目的圖示。最大檔案大小：2MB。允許的檔案類型：JPG、PNG。根據常規配置，用於桌面和/或行動視圖。使用 PNG 檔案來實現懸停時的顏色變化。使用 PNG 檔案時，請確保圖像沒有背景。

• 隱藏選單項目內容： 打開後，類別將顯示為不包含任何內容，包括子類別

• 子選單寬度： 設定適合您的網站風格的下拉標籤的寬度

• 子選單模板： 從下拉式選單中選擇子選單範本：“列視圖”或“自訂檢視”

列數 指定您需要的佈局的列數。如果值為 0，則列數等於子類別的數量，最大值為10。請注意，只有當您在設定“子選單範本”中選擇了“列視圖”選項時，此設定才可見。

子類別模板 - 此設定有兩個選項：「水平」和「垂直」。請注意，只有在「子選單模板」設定中選擇了「自訂檢視」選項後，此設定才可見。

• 內容：

點擊“”，進入編輯頁，點擊設置按鍵，選擇“插入部件”

• 小工具類型： 選擇MegaMenu 產品

• 標題： 小工具的標題名

• 區塊佈局：可選擇網格或者幻燈片

選擇“網格”需要填寫以下内容：

• 顯示產品選項和‘加入購物車’按鈕： 如果是，客戶將看到產品選項，並能夠直接從下拉式選單中將產品新增至購物車。

• 顯示頁面控制： 如果是，客戶將看到分頁按鍵，並能夠切換頁面。

• 每頁產品數量： 每個頁面可顯示的產品數，默認數量為5

• 要顯示的產品數量： 需顯示的產品總數

選擇幻燈片需要填寫以下内容：

• 可見項目數：

• 滑桿寬度（px）： 調 整滑桿的寬度以符合您的高級選單配置

• 滑桿自動播放： 若為*「是」，產品將自動切換。如果沒有*，客戶將必須手動切換

• 滑桿自動播放速度（毫秒）： 如果需要，設定特定的切換速度。

• 顯示產品選項和‘加入購物車’按鈕： 選擇“是”則顯示 ‘加入購物車’按鈕，選擇否則不顯示

• 要顯示的產品數量： 指定您想要在網格/滑桿中顯示的產品的大致數量。

公用配置：

• 模板： 預設選擇 “MegaMenu產品網格範本”

• 快取週期 (秒)： 指定小工具更新之間的時間（秒）。

• 條件： 設定靈活的條件來顯示您需要的產品。

點擊“”添加條件

確認後點擊“”，回到頁面頂部點擊“”，可回到HTML Code編輯頁，點擊“”

5.2 進階選單（適用於行動裝置）

路徑：目錄--選擇分類--進階選單（適用於行動裝置）

進階選單字體： 可選粗體或者正常