슬라이딩 메뉴를 구현해주는 자바스크립트입니다.

소스와 대충의 사용법은 아래에 남기지만, 실제 작동하는 예제를 보고싶다거나 제 홈페이지가 궁금해서 못견딜 것 같은 분(...이 있을리가!)은 링크에 오셔서 봐도 됩니다.
... 이 정도 홈페이지 광고는 봐주시는 거죠?

서브메뉴를 DIV 로 둘러싸는데 서브메뉴의 크기를 자동으로 인식해서 슬라이딩 애니메이션을 구현합니다.

브라우저는 오페라, 모질라(동급의 불여우 포함), 오페라에서 다 작동합니다. 제가 리눅스 데스크탑은 아직 사용하지 않는 이유로 리눅스 계열의 브라우저에선 테스트해보지 않았습니다. 아래에 적힌 것 이외의 버전이나 OS, 브라우저 등에서 확인해보신 분은 알려주시면 내용을 업데이트 하도록 하겠습니다.

그냥 사용하셔도 되지만, 불편하지 않으시다면 제 이름하고 사이트 주소만이라도 주석에 달아놓으시면 고맙겠습니다.

홈페이지 : http://mygony.com
예제 링크 : http://mygony.com/tt/index.php?pl=70&nc=1

--------------------
소스코드
--------------------
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);
}

--------------------
사용예제 코드
--------------------
<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>


--------------------
테스트 해본 브라우저
--------------------
Internet Explorer 6.0 SP1
Mozilla 1.7.2 (windows)
Opera 7.54 (windows)