슬라이딩 메뉴 스크립트 [세로]
Feb 27th by: wowmac<script type=”text/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>
<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>
Popularity: 100% [?]
