웹마스터 팁
page_full_width">
슬라이딩 메뉴 자바스크립트
2004.09.21 13:03
슬라이딩 메뉴를 구현해주는 자바스크립트입니다.
소스와 대충의 사용법은 아래에 남기지만, 실제 작동하는 예제를 보고싶다거나 제 홈페이지가 궁금해서 못견딜 것 같은 분(...이 있을리가!)은 링크에 오셔서 봐도 됩니다.
... 이 정도 홈페이지 광고는 봐주시는 거죠?
서브메뉴를 DIV 로 둘러싸는데 서브메뉴의 크기를 자동으로 인식해서 슬라이딩 애니메이션을 구현합니다.
브라우저는 오페라, 모질라(동급의 불여우 포함), 오페라에서 다 작동합니다. 제가 리눅스 데스크탑은 아직 사용하지 않는 이유로 리눅스 계열의 브라우저에선 테스트해보지 않았습니다. 아래에 적힌 것 이외의 버전이나 OS, 브라우저 등에서 확인해보신 분은 알려주시면 내용을 업데이트 하도록 하겠습니다.
그냥 사용하셔도 되지만, 불편하지 않으시다면 제 이름하고 사이트 주소만이라도 주석에 달아놓으시면 고맙겠습니다.
홈페이지 : http://mygony.com
예제 링크 : http://mygony.com/tt/index.php?pl=70&nc=1
--------------------
소스코드
--------------------
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);
}
--------------------
사용예제 코드
--------------------
<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>
--------------------
테스트 해본 브라우저
--------------------
Internet Explorer 6.0 SP1
Mozilla 1.7.2 (windows)
Opera 7.54 (windows)
소스와 대충의 사용법은 아래에 남기지만, 실제 작동하는 예제를 보고싶다거나 제 홈페이지가 궁금해서 못견딜 것 같은 분(...이 있을리가!)은 링크에 오셔서 봐도 됩니다.
... 이 정도 홈페이지 광고는 봐주시는 거죠?
서브메뉴를 DIV 로 둘러싸는데 서브메뉴의 크기를 자동으로 인식해서 슬라이딩 애니메이션을 구현합니다.
브라우저는 오페라, 모질라(동급의 불여우 포함), 오페라에서 다 작동합니다. 제가 리눅스 데스크탑은 아직 사용하지 않는 이유로 리눅스 계열의 브라우저에선 테스트해보지 않았습니다. 아래에 적힌 것 이외의 버전이나 OS, 브라우저 등에서 확인해보신 분은 알려주시면 내용을 업데이트 하도록 하겠습니다.
그냥 사용하셔도 되지만, 불편하지 않으시다면 제 이름하고 사이트 주소만이라도 주석에 달아놓으시면 고맙겠습니다.
홈페이지 : http://mygony.com
예제 링크 : http://mygony.com/tt/index.php?pl=70&nc=1
--------------------
소스코드
--------------------
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);
}
--------------------
사용예제 코드
--------------------
<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>
--------------------
테스트 해본 브라우저
--------------------
Internet Explorer 6.0 SP1
Mozilla 1.7.2 (windows)
Opera 7.54 (windows)
댓글 3
-
†천상의燦†
2004.09.21 23:26
^^ 좋은 자료 감사합니다. -
Change...
2004.09.23 20:07
깔끔하네요...^^ 추천 -
네츠키
2005.02.16 12:27
아..근데 tree1에 마우스가 올라갔을때 링크가 된것 처럼 손모양이 나오게 할 수는 없을까요?
제목 | 글쓴이 | 날짜 |
---|---|---|
코어 1.5.1에서 회원목록에 성별아이콘 쓰기(수정) | 늘푸른이 | 2011.12.10 |
계정 용량 측정 소스 (펌)
[1]
![]() | rjsoo | 2011.12.16 |
제로보드 xe 쇼핑몰 오늘본 상품 퀵메뉴 만드는 법 알려주세요 | 유유히 | 2011.12.15 |
1.5 에서 기존 로그인 스킨 이메일 로그인 구동시키기 [1] | 쿨키드 | 2011.11.01 |
외부에서 단독으로 xe게시판에 글 올리기, blogapi 기능 사용하여,
[6]
![]() | 김기철980 | 2011.01.27 |
코어 1.5.1에서 회원정보에 성별아이콘 쓰기
![]() | 늘푸른이 | 2011.12.10 |
1.5.1 가입 후 이동 페이지 버그 해결법 [2] | AinSoff | 2011.12.06 |
썸네일 없애는 법 없나요??
[1]
![]() | Huckleberry Finn | 2011.12.05 |
다운로드 필요 포인트가 0 인 모듈에서의 비회원 다운로드 권한 부여 [2] | 키네시스 | 2011.02.09 |
rewrite 모듈 - 아파치 설정.. [1] | 야간비행7 | 2009.01.03 |
XE 1.5.0.9부터 회원가입 비밀번호 찾기 질문/답변때문에 고생하셨던분들을 위한 해결방안 [2] | 라미아스튜디오 | 2011.11.27 |
아이콘 보유자에 한해 지정한 내용 보여주기 [3] | 도라란 | 2011.11.25 |
휴대폰 인증 회원에 한해 지정한 내용 보여주기 | 도라란 | 2011.11.25 |
회원가입시 '비밀번호 찾기 질문/답변' 항목이 나오질 않고 회원설정에서 설정불가능
![]() | 머구리 | 2011.11.25 |
게시물의 엮인글 허용 체크가 풀어지는 경우 | Hoseok | 2011.11.23 |
비회원도 추천가능하게 하기 (1.5기준설명) [3] | 빽짱구 | 2011.11.18 |
최고관리자 이외에는 ''회원정보보기''를 막기 [13] | 비나무 | 2008.07.10 |
시작 페이지 /xe/ 이신분들 ~ 이제 고민 해결. [3] | 숭숭군 | 2011.11.14 |
간단한 ajax 채팅소스입니다. [12] | 제로저아 | 2008.10.23 |
1.5.8 버전 파일 첨부시 파일 선택창 안뜨는 현상. [5] | 키아레인 | 2011.11.08 |