wixhk

2021年9月24日2 分鐘

製作子子頁面 - Wix編輯器

更新日期：2023年4月13日

現時，Wix提供給客戶的選單(Menu)只有簡單兩層，就是標題加子頁面。我們參考了Google網站管理員選單的樣式，只需要使用一些簡單的組件，及一點點代碼，就可以制定一個包含子子頁面的選單。

製作共有八大步驟，有關教學，請查以下連結:

製作子子頁面粵語版:

製作子子頁面國語版:
 

有關參考頁面程式碼:
 

$w.onReady(function () {
  $w('#shopButton').onClick(() => {
  toggleBox($w('#shopBox'), $w('#shopPlusSign'), $w('#shopMinusSign'));
 })
 
 function toggleBox(boxElement, plusSign, minusSign) {
  const isCollapsed = boxElement.collapsed;
  if (isCollapsed) {
  plusSign.hide();
  minusSign.show();
  boxElement.expand();
  } else {
  minusSign.hide();
  plusSign.show();
  boxElement.collapse();
 }
 }
 })

這裡下載加號符號
 這裡下載減號符號

請支持本站繼續製作教學，有賴各位好友按讚丶分享丶訂閱，謝謝!
 facebook.com/wixhk
 https://www.youtube.com/channel/UCyoo8oiHgoounF8dYPKyOuQ
 

新增滑鼠懸停觸發選單:


 以上影片所描述的是，訪客滑鼠點擊漢堡按鈕，才會觸發子子頁面選單。你還可以加一點點設定及代碼，就可以在網頁版使用滑鼠懸停觸發燈箱選單。

  • 圖一 1. 在編輯器點擊漢堡按鈕，取消手動連結燈箱

  • 圖一 2.打開網站的masterPage.js (這是應用在頁首及頁尾的程式碼控制面板)

圖一

  • 圖二 1. 在masterPage面板清理原有的代碼，在第一行(Line 1)加上以下代碼:

import wixWindow from 'wix-window';

  • 圖二 2. 點擊漢堡按鈕並留意其名稱，在右邊Event Handlers為按鈕加上點擊(onClick)及懸停(onMouseIn)兩個事件

圖二

  • 圖二 3. 兩個事件已自動加上

  • 圖二 4. 在左邊網站結構，找出選單的名稱，在兩個事件之間，加上以下的代碼:

wixWindow.openLightbox('選單名稱');

然後重新發布便可。由於手機版不能使用懸停觸發，所以必須留下以點擊 "X"作為關閉選單的設定。

完整masterPage程式碼:


 import wixWindow from 'wix-window';
 
 export function hamburger_mouseIn(event) {
  wixWindow.openLightbox('選單名稱');
 }
 
 export function hamburger_click(event) {
 wixWindow.openLightbox('選單名稱');
 }
 

請參考範本: 子子頁面選單

*程式碼是跟據現時Velo by Wix的Velo API Reference所制定。本站未能就API或系統更新而導致程式碼失效負責(請聯絡Wix Support)，或否定Wix會否於日後向Velo使用者徵費的可能性(現時是免費)。

    0
    0