불여우에서도 되는 메뉴 5
<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>
<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>
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 4개
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>
작업하시면서 스타일을 빠뜨리셨습니다.
스크립트와 스타일 선언을 head 에 넣어 주세요.
참고로 지금 이미지로 해본 주소 입니다. http://imovielove.com/menu.htm