윅스 (Wix) 코딩 강의 중급 (Intermediate) - 메가 메뉴 만들기 (Mega Menu) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 메가 메뉴 만들기 (Mega Menu) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 메가 메뉴 만들기 (Mega Menu) - 상호작용 (Interactions)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트 전체적인 구성을 확인할 수 있는 메뉴 부분을 드랍 다운 형태의 메뉴 기능을 만듭니다.

 

예제 보러가기 (View Example)

HOME | Mega Menu T

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 데이터베이스 컬렉션 (mainMenu)
• 데이터베이스 컬렉션 (subMenu)
• 데이터베이스 컬렉션 (product)
• 데이터베이스 컬렉션 (new)
• 데이터베이스 컬렉션 (range)
• 반복 레이아웃 / 리피터 (mainMenuRepeater)
• 반복 레이아웃 / 리피터 (subMenuRepeater)
• 반복 레이아웃 / 리피터 (productRepeater)
• 반복 레이아웃 / 리피터 (rangeRepeater)
• 반복 레이아웃 / 리피터 (newRepeater)

 

코드 (Code)

Home

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
	let allMenusData;
	let $item = $w.at();
	let containers = $item("Container");

	iniPage()
		.then((resuts) => {
			allMenusData = resuts;
			selectMenu(allMenusData, 'subMenuRepeater', 0);
			let mainMenuRepeaterData = $w("#mainMenuRepeater").data;
			let subMenuRepeaterData = $w("#subMenuRepeater").data;
			
			$w("#mainMenuRepeater").forItems([mainMenuRepeaterData[0]._id], ($item, itemData, index) => {
				$item('#mainMenuButton').style.backgroundColor = 'white';
				$item('#mainMenuButton').style.color = 'black';
				$item('#subMenuButton').style.color = 'black';
			});

			$w("#subMenuRepeater").forItems([subMenuRepeaterData[0]._id], ($item, itemData, index) => {
				$item('#subMenuButton').style.color = '#ED5829';
			});

		});
	containers.forEach(function (container, i, repeatersArray) {
		const repeater = container.parent;
		const containerChildern = container.children;
		const image = containerChildern.filter(element => element.type === '$w.Image')[0];
		const button = containerChildern.filter(element => element.type === '$w.Button')[0];

		repeater.onItemReady(($item, itemData, index) => {
			$item('#' + button.id).label = itemData.name;
			if (itemData.image) {
				$item('#' + image.id).src = itemData.image;
			}
			if (itemData.link) {
				$item('#' + container.id).onClick((event) => {
					// if you the menu to link to different pages, add the needed links to the collections and uncomment the following line:
					// wixLocation.to(itemData.link);
				});
			} else {
				$item('#' + button.id).onMouseIn((event) => {
					switch (button.id) {
					case 'mainMenuButton':
						button.style.backgroundColor = 'black';
						$item('#' + button.id).style.backgroundColor = 'white';
						$item('#' + button.id).style.color = 'black';
						break;
					case 'subMenuButton':
						button.style.color = 'black';
						$item('#' + button.id).style.color = '#ED5829';
						break;
					default:
						break;
					}
					selectMenu(allMenusData, repeater.id, index);
				});
			}
		});
	});
});

async function iniPage() {
	try {
		const allMainMenuData = await wixData.query('mainMenu').limit(1000).find();
		$w('#mainMenuRepeater').data = allMainMenuData.items;
		$w('#mainMenuStrip').expand();

		const allSubMenuData = await wixData.query('subMenu').limit(1000).find();
		$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
		$w('#subMenuStrip').expand();

		const allRangeData = await wixData.query('range').limit(1000).find();
		const allNewData = await wixData.query('new').limit(1000).find();
		const allProductData = await wixData.query('product').limit(1000).find();

		return {
			'mainMenuData': allMainMenuData.items,
			'subMenuData': allSubMenuData.items,
			'rangeData': allRangeData.items,
			'newData': allNewData.items,
			'productData': allProductData.items
		};

	} catch (err) {
		console.log('error ', err);
	}
}

function selectMenu(allMenusData, clickedMenu, clickedButton) {
	const allMainMenuData = allMenusData.mainMenuData;
	switch (clickedMenu) {
	case 'mainMenuRepeater':
		$w('#subMenuRepeater').data = allMenusData.subMenuData.filter(item => item.mainMenu === allMainMenuData[clickedButton]._id);
		$w('#megaMenuStrip').collapse();
		break;
	case 'subMenuRepeater':
		$w('#rangeRepeater').data = filterd(allMenusData.rangeData);
		$w('#newRepeater').data = filterd(allMenusData.newData);
		$w('#productRepeater').data = filterd(allMenusData.productData);
		$w('#megaMenuStrip').expand();
		break;
	default:
		break;
	}

	function filterd(data) {
		return data.filter(item => item.subMenu === ($w('#subMenuRepeater').data)[clickedButton]._id);
	}
}

 

API

Wix Data API

Wix Location API

 

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 사이트 콘텐츠 변경하기 (Change Site Content) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 사이트 콘텐츠 변경하기 (Change Site Content) - 상호작용 (Interactio

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Mega Menu | Corvid by Wix Examples | Wix.com