메뉴 보이기
Profile
이온디

2009.01.20

Script

클릭하면 슬라이드되면서 펼쳐지는 사이드 메뉴

조회 수 8242 추천 수 0
menu_tree.png
클릭하면 세로로 펼쳐지는 메뉴입니다. 사이드에 쓰면 좋을 것 같긴 한데.. 클릭해야 된다는게
메뉴에서는 약간 안 어울릴지도 모르겠네요.

<script>
function slide(Id, interval, to)
{
    var obj = document.getElementById(Id);
    var H, step = 5;

    if (obj == null) return;
    if (to == undefined) { // user clicking
        if (obj._slideStart == true) return;
        if (obj._expand == true) {
            to = 0;
            obj.style.overflow = "hidden";
        } else {
            slide.addId(Id);
            for(var i=0; i < slide.objects.length; i++) {
                if (slide.objects[i].id != Id && slide.objects[i]._expand == true) {
                    slide(slide.objects[i].id);
                }
            }

            obj.style.height = "";
            obj.style.overflow = "";
            obj.style.display = "block";
            to = obj.offsetHeight;
            obj.style.overflow = "hidden";
            obj.style.height = "1px";
        }
        obj._slideStart = true;
    }
   
    step            = ((to > 0) ? 1:-1) * step;
    interval        = ((interval==undefined)?1:interval);
    obj.style.height = (H=((H=(isNaN(H=parseInt(obj.style.height))?0:H))+step<0)?0:H+step)+"px";
   
    if (H <= 0) {
        obj.style.display = "none";
        obj.style.overflow = "hidden";
        obj._expand = false;
        obj._slideStart = false;
    } else if (to > 0 && H >= to) {
        obj.style.display = "block";
        obj.style.overflow = "visible";
        obj.style.height = H + "px";
        obj._expand = true;
        obj._slideStart = false;
    } else {
        setTimeout("slide('"+Id+"' , "+interval+", "+to+");", interval);
    }
}
slide.objects = new Array();
slide.addId = function(Id)
{
    for (var i=0; i < slide.objects.length; i++) {
        if (slide.objects[i].id == Id) return true;
    }
    slide.objects[slide.objects.length] = document.getElementById(Id);
}
</script>
<style>
BODY { font-size:9pt; }
.menu {
    border:1px solid #CCCCCC;
    background-color:#DEDEDE;
    padding:3px 1px 1px 5px;

    width:150px;
}
.submenu {
    width:150px;
    padding-left:10px;
    display:none;
}
</style>
<div class="menu" onClick="slide('sub1');">Tree1</div>
<div id="sub1" class="submenu">
    <div>  + SubTree1-1</div>
    <div>  + SubTree1-2</div>
    <div>  + SubTree1-3</div>
    <div>  + SubTree1-4</div>
    <div>  + SubTree1-5</div>
</div>
<div class="menu" onClick="slide('sub2');">Tree2</div>
<div id="sub2" class="submenu">
    <div>  + SubTree2-1</div>
    <div>  + SubTree2-2</div>
    <div>  + SubTree2-3</div>
    <div>  + SubTree2-4</div>
</div>
<div class="menu" onClick="slide('sub3');">Tree3</div>
<div id="sub3" class="submenu">
    <div>  + SubTree3-1</div>
    <div>  + SubTree3-2</div>
    <div>  + SubTree3-3</div>
</div>
<div class="menu">이건 다른 메뉴</div>

Profile
0
Lv

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
100 드롭다운 가로형 메뉴 2009.01.20 4772
99 탭메뉴형 자바스크립트 2009.01.20 4973
98 [HTML5] dl과 ul의 상하관계(?)에 대해서 질문드립니다. 1 2009.01.20 5121
97 Dolphin CSS Menu 2009.01.20 3785
96 Cut & Paste CSS Horizontal List Menu 2009.01.20 3859
95 [Script] 슬라이딩 레이어 1 2009.01.20 5815
94 [Script] 스크롤 따라다니는 레이어 2009.01.20 4881
93 [Script] 스크롤 따라다니는 레이어 2 2009.01.20 5746
92 [Script] 간단한 점프메뉴(selecter) 2009.01.20 4842
91 [Script] 화면 왼쪽에 숨겨진 레이어 꺼내기 1 2009.01.20 5608
90 [Script] 메뉴 슬라이딩(가로) 1 2009.01.20 7167
[Script] 클릭하면 슬라이드되면서 펼쳐지는 사이드 메뉴 2009.01.20 8242
88 [Script] 가로 세로가 호환되는 메뉴 2009.01.20 4127
87 [Script] 위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 2009.01.20 4734
86 [Script] 롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) 2 2009.01.20 6402
85 [Script] Show-Hide Layers (by 태그매니아) 3 2009.01.20 4934
84 [Script] Show-Hide Layers (by 신의키스) 2009.01.19 4644
83 [Script] div 높이 100% 맞추기 2009.01.18 6826
82 [Script] 롤오버 메뉴 만들기 1 2009.01.18 5880
81 주석 표시하기 2009.01.14 3506