테스트 사이트 - 개발 중인 베타 버전입니다

[HTML] 부드럽게 서브메뉴가 슬라이딩 되는 펼침메뉴

· 17년 전 · 3650 · 3

<html>
<head>
    <title>http://siteweb.co.kr/</title>
<script language="javascript">
/**
* by 행복한고니 (20041008)
*
* Homepage : http://siteweb.co.kr/
*/
<!--
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>
.menu {
    border:1px solid #999999;
    background-color:#FFCC00;
    padding:3px 1px 1px 5px;
    cursor:hand;
    width:150px;
}
.submenu {
    width:150px;
    padding-left:10px;
    display:none;
}
</style>
</head>
<body>

<div class="menu" onClick="slide('sub1');">메뉴항목 1</div>
<div id="sub1" class="submenu">
    <div>- Sub menu 1-1</div>
    <div>- Sub menu 1-2</div>
    <div>- Sub menu 1-3</div>
    <div>- Sub menu 1-4</div>
    <div>- Sub menu 1-5</div>
</div>
<div class="menu" onClick="slide('sub2');">메뉴항목 2</div>
<div id="sub2" class="submenu">
    <div>- Sub menu 2-1</div>
    <div>- Sub menu 2-2</div>
    <div>- Sub menu 2-3</div>
    <div>- Sub menu 2-4</div>
    <div>- Sub menu 2-5</div>
    <div>- Sub menu 2-6</div>
    <div>- Sub menu 2-7</div>
    <div>- Sub menu 2-8</div>
</div>
<div class="menu" onClick="slide('sub3');">메뉴항목 3</div>
<div id="sub3" class="submenu">
    <div>- Sub menu 3-1</div>
    <div>- Sub menu 3-2</div>
    <div>- Sub menu 3-3</div>
</div>
<div class="menu" onClick="slide('sub4');">메뉴항목 4</div>
<div id="sub4" class="submenu">
    <div>- Sub menu 4-1</div>
    <div>- Sub menu 4-2</div>
    <div>- Sub menu 4-3</div>
</div>
<div class="menu" onClick="slide('sub5');">메뉴항목 5</div>
<div id="sub5" class="submenu">
    <div>- Sub menu 5-1</div>
    <div>- Sub menu 5-2</div>
    <div>- Sub menu 5-3</div>
    <div>- Sub menu 5-4</div>
</div>

</body>
</html>

[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 3개

17년 전
잘쓸게요.
고맙습니다...
세로메뉴네요. 감사합니다.

게시글 목록

번호 제목
13686
13683
21003
13680
25150
25143
20981
13679
13678
13677
13675
13674
29483
13672
13671
13670
13669
29482
13668
13666
29481
29480
13665
13664
13663
13662
13661
25124
25116
20970
13660
JavaScript adsc
13658
29479
13655
13650
13648
13647
13646
29478
13645
PHP 3.0
13643
13642
13640
13637
13636
13635
13634
29476
13633
13632
13630
29473
13624
13620
13582
13556
29472
29471
13555
13554
13553
13552
13551
13550
13546
13545
13544
29470
13541
13540
13538
13535
29466
13533
29463
13532
13531
13529
29462
13528
29459
29458
13527
13526
13525
13523
13522
13512
13510
13507
13498
29452
13492
13487
29450
13480
13474
13460
13457
29447