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