| <HTML> <HEAD> <TITLE>슬라이딩 메뉴(출처-mygony.com)</TITLE> <style> BODY { font-size:9pt; } .menu { border:1px solid #CCCCCC; background-color:#DEDEDE; padding:3px 1px 1px 5px; width:150px; cursor:pointer; } .submenu { width:150px; padding-left:10px; display:none; cursor:pointer; } </style> <SCRIPT LANGUAGE="JavaScript"> <!-- 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> </HEAD> <BODY> <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> </BODY> </HTML> |
반응형
'인터넷정보' 카테고리의 다른 글
| 숫자만 입력되었는지 체크하기 (0) | 2007.10.18 |
|---|---|
| 숫자만 입력되었는지 체크하기 (0) | 2007.10.18 |
| 이미지 안쓰고 모서리 둥근 테이블 만들기 2 (0) | 2007.10.18 |
| 이미지 안쓰고 모서리 둥근 테이블 만들기 2 (0) | 2007.10.18 |
| 슬라이드 메뉴 (0) | 2007.10.18 |
| CSS 만으로 만든 롤오버 이미지 (0) | 2007.10.18 |
| CSS 만으로 만든 롤오버 이미지 (0) | 2007.10.18 |
| 웹페이지에 삽입된 동영상 및 음악 제어 (0) | 2007.10.18 |
| 웹페이지에 삽입된 동영상 및 음악 제어 (0) | 2007.10.18 |
| 토글 메뉴 (0) | 2007.10.18 |