웹마스터 팁

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

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

서브메뉴를 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)

제목 글쓴이 날짜
[권한이 없습니다] 권한에 따른 다른 메시지 출력하기 [10] [1] 반도체맨 2008.10.03
상담/신청 (쓰기만 가능한 게시판) 만들기 [10] mmx900 2008.03.20
디자인 하시는 분에게 ~ 신기한 팁 (from IE) [2] 999 2011.02.23
관리자 아이디로 작성한 비밀글을 특정인이 볼수있도록 해주는 팁 [13] file Dreami 2009.04.03
[중복일수도...] Srl 생성의 비밀???;;? [1] RainDrop+ 2011.02.22
관리권한 가져도 댓글이 수정/삭제 안 되는 경우.. [4] sejin7940 2011.02.14
게시판모듈 글목록에서 분류명(카테고리)를 이미지로 표현하기 [4] nalireco 2011.01.06
해시로부터 주민등록번호 복호화 [2] fallstoofast 2008.03.12
IIS 7용 Rewrite fsfsdas 2011.02.20
nginx에서 대역폭 제한하기 fsfsdas 2011.02.20
MySQL db를 InnoDB로 바꾸기 (MyISAM to InnoDB) fsfsdas 2011.02.20
리눅스에서 디렉토리, 파일 용량 확인하기 fsfsdas 2011.02.20
우분투 charset을 euc-kr로 변경하기 fsfsdas 2011.02.20
우분투 10.04 LTS, 시스템 정보 보기 fsfsdas 2011.02.20
우분투 10.04 LTS, sendmail 설치 및 설정 fsfsdas 2011.02.20
우분투 10.04 LTS, SSH 사용자 접속 제한 fsfsdas 2011.02.20
우분투 10.04 LTS, 방화벽 쉽게 설정하기 fsfsdas 2011.02.20
grep로 하위 폴더내 파일까지 내용 검색하기 fsfsdas 2011.02.20
우분투 10.04 LTS, vsftpd 설치/설정 fsfsdas 2011.02.20
내서버에서 ssh에서 root 권한 얻기 fsfsdas 2011.02.20