슬라이드 메뉴 가이드

이 화면은 슬라이드 메뉴를 구성하는 샘플 화면이다.

메뉴버튼를 이용한 샘플과 패널에 animate 속성을 적용하여 메뉴를 구현한 샘플이다.

템플릿 위치: /HTML5/UTIL/ANIMATE/slide_menu

템플릿 파일

• slide_menu.xml
• slide_menu.js
• 새창으로 실행

/*
*	메뉴버튼 사용
*/

// 메뉴 버튼 펼치기 / 접기
function mbtn_on_mouseup(objInst)
{
	this.mbtn.togglemenubox();
}

/*
*	패널사용
*/

// 열려있는 패널영역을 숨김처리한다.
function screen_on_load()
{
	// 화면로드시 숨김상태로 시작할경우.
	//var obj_prop = {left : 6, width: 84};
	//pl_menu.animate(obj_prop, 0, "swing", "showMenuCallback");
	//pl_menu2.animate(obj_prop, 0, "swing", "showMenuCallback");

	// 화면로드시 펼침상태로 시작할경우.
	this.showMenuCallback();
}


// animate callback
function showMenuCallback()
{
	// 패널영역을 보여준다.
	this.pl_menu.setvisible(true);
	this.pl_menu2.setvisible(true);
	// 패널영역을 최상단으로 배치한다.
	this.pl_menu.setzorder(0);
	this.pl_menu2.setzorder(0);
}


// pl_menu : 메뉴 영역이 열려 있는지 확인 후 토글 처리한다.
function btn_hidden_on_mouseup(objInst)
{
	var isShow;
	var nBtnWidth = this.btn_hidden.getwidth();

	if (this.btn_hidden.getleft() < nBtnWidth) {
		isShow = false;
	} else {
		isShow = true;
	}

	this.menuToggle(isShow);
}

// pl_menu2 : 메뉴 영역이 열려 있는지 확인 후 토글 처리한다.
function btn_hidden2_on_mouseup(objInst)
{
	var isShow;
	var nBtnWidth = this.btn_hidden2.getwidth();
	var plWidth = this.pl_menu2.getwidth();

	if (plWidth > nBtnWidth) {
		isShow = true;
	} else {
		isShow = false;
	}

	this.menuToggle2(isShow);
}

// pl_menu : 메뉴 펼치기 / 닫기
function menuToggle(isShow)
{
	var obj_prop, obj_prop_inner;
	var scWidth;
	if (isShow) {
		obj_prop = {left : 6, width: 84};
		obj_prop_inner = {left : 0, width: 0};
		this.pl_menu.animate(obj_prop, 500, "swing", "");
	} else {
		scWidth = screen.getoriginalscreenwidth();
		obj_prop = {left : 6, width: 798 };
		this.pl_menu.animate(obj_prop, 500, "swing", "");
	}
}

// pl_menu2 : 메뉴 펼치기 / 닫기
function menuToggle2(isShow)
{
	var obj_prop, obj_prop_inner;
	var scWidth;
	if (isShow) {
		obj_prop = {left : 6, width: 84};
		obj_prop_inner = {left : 0, width: 0};
		this.pl_menu2.animate(obj_prop, 500, "swing", "");
	} else {
		scWidth = screen.getoriginalscreenwidth();
		obj_prop = {left : 6, width: 798 };
		this.pl_menu2.animate(obj_prop, 500, "swing", "");
	}
}