−목차

슬라이드 메뉴 가이드

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

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

예시

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

템플릿 파일

화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/*
*   메뉴버튼 사용
*/
 
// 메뉴 버튼 펼치기 / 접기
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", "");
    }
}