prototype.js 를 이용한 트리형식의 카테고리메뉴

도움이 될까 해서 올립니다.

이미지파일은 폴더형태의 열림/닫힘 을 구하셔서
열림(folderopen.gif),  닫힘(fiolder.gif) 으로 이름을 바꾸시고
_Images 디렉토리 안에 넣어두시면 바로 적용됩니다.

기본적으로 prototype.js 를 사용했으니 다운을 받으세요. 구하기 쉽습니다.

http://www.prototypejs.org/ 에서 받으시고 prototype.js 로 이름을 리네임하세요.

자바스크립트의 객체지향적 개발방법에 대한 기초적인 부분이고요
디비 연동 및 XML 연동 부분은 뭐 기회가 있다면 또 올려드리겠습니다...

초보분들 참고하세요...


<!-- category.html  부분 -->

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="CateGory.js"></script>

<div id="menu1" onClick="CateGory.SwitchCateGory('sub1', this)" style="cursor:pointer">
<img id="folder_menu1" align="absmiddle" src="_Images/folder.gif">아침식사</div>
     <span class="submenu" id="sub1" style="display:none;padding-left:10px">
            
        <div id="menu1-1" onClick="CateGory.SwitchCateGory('sub1-1', this)" style="cursor:pointer">
        <img id="folder_menu1-1" align="absmiddle" src="_Images/folder.gif">중간점검</div>
            <span class="submenu" id="sub1-1" style="display:none;padding-left:15px">
                <a href="#" onclick="CateGory.ClickMenu('컵라면')">컵라면</a><br>
                빵과 우유<br>
                삼겹살
            </span>
        박카스<br>
        십전대보탕<br>
        원숭이골탕
        </span>

<div id="menu2" onClick="CateGory.SwitchCateGory('sub2', this)" style="cursor:pointer">
<img id="folder_menu2" align="absmiddle" src="_Images/folder.gif">점심식사</div>
      <span class="submenu" id="sub2" style="display:none;padding-left:10px">
        콩나물 해장국<br>
        개구리 앞다리<br>
        바퀴벌레 수염튀김
        </span>

<div id="menu3" onClick="CateGory.SwitchCateGory('sub3', this)" style="cursor:pointer">
<img id="folder_menu3" align="absmiddle" src="_Images/folder.gif">저녁식사</div>
      <span class="submenu" id="sub3" style="display:none;padding-left:10px">
        물회<br>
        개구리 뒷다리<br>
        돼지 혀바닥 튀김
        </span>        



<!-- CateGory.js 부분 -->


var CateGory =
{

    UDIR         : '',    // 경로


    // 구성된 트리메뉴에서 클릭시 메뉴전환처리
       
    SwitchCateGory : function ( OBJ, F )
    {

        if ( document.getElementById )
        {
            var EL      = $(OBJ);                            // 현재 클릭한 메뉴의 객체
            var CHEL = EL.getElementsByTagName("span");    // 하위메뉴의 엘리먼트
                
            var HID  = $(F.id);                        // 현재 엘리먼트

            var divNimg = 'folder_' + HID.id;            // IMG 아이디를 생성시킴
            var ImgSrc     = $(divNimg).src;
                
            var imgClose = "folder.gif";                // 닫힘 아이콘
            var imgOpen  = "folderopen.gif";            // 열림 아이콘

            var    imgName     = imgOpen;                        // 기본은 닫힘

            var ImgFileName = ( imgName == 'folder.gif' ) ?  imgOpen : imgClose;    // 상황에 따라 열림/닫힘                    
            var imgPath  = "<img id='"+divNimg+"' align='absmiddle' src='"+this.UDIR+"/_Images/"+ImgFileName+"'>";                    

                
            if ( EL.style.display != "block" )    { EL.style.display = "block"; }
            else                                { EL.style.display = "none"; }

        }

    }
        
}        


더 좋은 방법이나 좋은프로그램 있으면 올려주세요.. 저도 참고 좀 하게~~^^