製作子子頁面 - Wix編輯器

現時，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使用者徵費的可能性(現時是免費)。