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

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

퍼블리셔 html
웹키
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 17년 전 · 3644 · 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년 전
잘쓸게요.
blue4u
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
세로메뉴네요. 감사합니다.

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기

remove()를 이용하여 엘리먼트 삭제하기

#개발자 #jquery
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

개발하면서 도움이 많이 되는 array 함수 extract 소개합니다 [2]

#개발자 #php
천국나무
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

동일 엘리먼트 순번 알아내기 [2]

#개발자 #jquery
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] abstract 추상클래스 [2]

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

width(), height() 메서드를 이용하여 가로크기, 세로 크기 알아내기

#개발자 #jquery
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

offset() 메서드를 이용하여 left, top 값 set, get 하기

#개발자 #jquery
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

position() 메서드 객체에 대한 좌표값

#개발자 #jquery
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

closest : 선택된 요소에서 최초의 부모요소 객체를 얻어온다.

#개발자 #jquery
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

css !important 의 활용 [3]

#퍼블리셔 #css
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] 여러 종류의 객체를 하나의 배열로 다루기

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

배열에서 그룹별로 합계 구하기(group by)

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] instanceof 인스턴스 확인

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

preg_split 를 이용한 문자열 나누기와 중복값 제거후 정렬 [1]

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

중복된 값 중 한개만 제거 2번째 이야기

#개발자 #php
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

중복된 값 중 제일 처음에 있는 값만 제거하기 [1]

#개발자 #php
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

class가 있는지 없는지 체크하기

#개발자 #jquery
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

배열에서 중복 값 없애기

#개발자 #php
잘잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] Singleton 싱글톤

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

str_pad 자릿수만큼 특정문자로 채우기

#개발자 #javascript
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] Overloading 오버로딩2

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] Overloading 오버로딩1

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

날짜 문자 1분 전, 1시간 전, 1일 전 표시

#개발자 #php
레레어닉
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] 포함관계를 통한 다중상속(?)

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] __construct 조상클래스의 생성자

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전

[클래스] Overriding 오버라이딩

#개발자 #php
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 11년 전