슬라이딩 메뉴를 구현해주는 자바스크립트이다.
왜 만들었냐.... 하면, 하나쯤 있으면 좋을 것 같아서. -_-;; 언젠간 쓸 때가 있지 않을까?
간단하게 해당 자바스크립트를 본문에 포함한 후에 해당 서브메뉴의 아이디를 지정해주면 된다.
...
서브메뉴를 둘러싼 DIV 태그의 id가 sub1 으로 되어있으므로 onclick 이벤트에 slide 함수를 사용하고 sub1 이라는 아이디를 넘겨준다. 보통은 서브메뉴를 펼치지 않은 상태에서 시작하므로 style의 display 속성을 none 으로 맞춰서 처음엔 안보이도록 하는게 좋다. 또한, 클래스로 지정해도 관계없다.
[#M_ 소스코드 보기.. | 소스코드 감추기.. |
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);
}
_M#]
[#M_ 예제코드 보기.. | 예제코드 감추기.. |
_M#]
제대로 된 결과라면 다음처럼 나옵니다. 서브메뉴의 크기에 관계가 없기때문에 보다 편하게 사용하실 수 있습니다. 아... 크로스 브라우징은 기본입니다.
[#NOBR_START#]
[#NOBR_END#]
[##_1C|880498.zip|| 파일명을 클릭해서 다운로드받으세요_##]
* 테스트 해본 브라우저
Internet Explorer 6.0 SP1
Mozilla 1.7.2 (windows)
Opera 7.54 (windows)
아... appendChild 가 안되는 이유를 알만하네요 ㅡ.ㅡ;;
tmp 객체를 못 가져오는 거라면 태그에 문제가 없는지 다시 보시구요...
TABLE 에 TD를 추가하시려는 듯 한데, 그거 안됩니다. TABLE 의 구조가...
이게 DOM 형태로 가장 단순한 구조인데요... 보통은 코딩할 때 TBODY 를 빼고 코딩하지만... 브라우저에서는 이 녀석을 만들어서 렌더링 합니다. 따라서 riow를 추가하려 할 때도 실은 TBODY에 추가해야 하는 거죠.
모질라 계열에서 이럴때 좀 까다로운 것이... IE와는 다르게 모질라는 태그 사이에 공백이 들어가있으면 그것도 Node로 인식해버립니다.
과 같은 태그가 있을 때 테이블의 childNodes 로 TBODY 를 찾을때...
IE는 childNodes[0] 이지만, 모질라는 childNodes[1] 이라는... ㅡ.ㅡ;;
좀 어렵나요? ... 강의를 준비하던지 해야지... 흐...
yser// 님이 올려주신 소스로 조금 수정해봤습니다. 🙂
이런저런 사용법을 올려뒀으니 도움이 될 것 같습니다.
http://mygony.com/files/for_yser.zip
프로젝트가 바빠서 급하게 만든 거라서... 오류처리나 이런건 없습니다.
그냥 이렇게 사용하는 거구나... 하는 정도만 아시라고.. ^^a
아... 봐주셔서 감사합니다 ^^
그리고.. 좀 이짓저짓 하다보니.. 마소에서 규정한 함수랑 모질라에서 쓰는 함수랑 좀 미묘하게 틀리더군요. insertCell 같은 것도 값없이 호출하면 모질라에서는 에러가 나던데.. 어느게 표준인지 모르겠습니다. 아마 모질라 쪽이 아닐까 하면서도.. 그리고 deleteRow 를 해보니까 테이블 내에 순서도 틀린 거 같더군요. -_-; 완전.... 진짜 이럴 때는 골치아프군요. 결국 따로따로 만드는 수 밖에 없다는 얘긴데...
yser// 모질라 관련이라면 여길 보시고...
http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html
익스플로러야 다 아실만한... MSDN 으로 ㅡ.ㅡ;;
비교하면서 보세요. ^
홈페이지 리뉴얼 중에 이 메뉴를 사용하려합니다.
홈피 링크는 테스트용 게시판이고, 아래 있는 구문으로 둘째 메뉴가 슬라이드 되어야 하겠습니다만;;;
";
?>
엉엉 ㅠ.ㅠ.ㅠ.ㅠ.ㅠ 웨 안될까요 ㅠ.ㅠ.ㅠ.ㅠ.ㅠ.ㅠ
다단계메뉴로 쓰고 싶은데 어딜 어케 수정해야 하는걸까요???
혹 이걸 다단계 메뉴로 만들어 주심 앙댈까요???
글구 행복한 고니 님께 메일을 보낼까 했더니...메일주소가 안보이네요~~어디 숨어 있는걸까요???
앗.**********@*******.com
이거시 저의 메일 주소입니다. 혹시 도움주실수 있다면 연락 주세요~~~
감사...아주 이쁘게 잘 적용해씁니다....앞으로도 계속 쭉....롱런해주시길...
저 서브메뉴 링크은 어떻게 걸지요?
안녕하세요.
이걸 적용할려고 하니 어느 컴에서는 되고 어느 컴에서는 스크립 오류가 떠요.
그리고 오류가 뜨는 곳의 오류는
if (to == undefined) 여기서 undefined가 에러가 나오네요.
undefined 정의 하지 않았다고 하면서 말이죠.
그래서 null을 대신 넣어 보니 돌아가는데요.
undefined를 사용한 이유가 궁금해서요. 제가 워낙 몰라서 대충 끼어 맞춘거라서요.