슬라이딩 메뉴를 구현해주는 자바스크립트이다.
왜 만들었냐.... 하면, 하나쯤 있으면 좋을 것 같아서. -_-;; 언젠간 쓸 때가 있지 않을까?
간단하게 해당 자바스크립트를 본문에 포함한 후에 해당 서브메뉴의 아이디를 지정해주면 된다.
...
서브메뉴를 둘러싼 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)
좋네요 ^^
잘 쓸게요
스쿨에서 논쟁이 있었더군요.
사람의 마음을 헤아리는 게 가장 어려운 것 같네요.
편하게 생각하시라구요.
그런 민감한 주제를 얘기할 때 어느 정도 논쟁은 예상했던 일이니까 당연하지만, 다만 제가 말하려 했던 바와 자꾸 어긋나는 것 같아서 아쉬울 뿐입니다. 게다가 저도 감정을 참지못하고 막말을 좀 한 것도 같구요. 아직 인간이 많이 덜된 것 같습니다. 곧 후회할 일을 해버리니.... ;;; 그래도 제가 한 말이니 책임진다는 의미에서 지우지는 않고 있지만요.
그나저나 오랜만이네요. 🙂
제가 찾던 소스였는데 어제 새로 시작한 프로젝트에 딱 맞는 소스입니다.
잘 쓰겠습니다...
가끔 소스찾으러 다니다가 헷갈릴때가 있지요... 무조건 고니님 블로그에 와서 찾으니까 말이죠 근데... 많은 부분의 게시물을 노퍼블릭 해 놓으신 것 같더라구요... ㅡㅡ; 최근에는 자바스크립에 관해 공부할 만한 사이트가 그리 쉽게 눈에 띄지 않는 터라...
결국 고니님의 소스는 스쿨에서 찾아낼 때도 있더군요... ^^;
위의 논하신 얘기들은 제가 모르는 터라... 아무튼 힘내시고요... 새로 프로그램의 메뉴얼을 작성해 볼려고 하는데 인터페이스를 그 프로그램과 흡사하게 만들어 볼려고 했더니만 인터랙티브한 기능들이 참 곤란하더군요... 풀다운이면 풀다운 슬라이딩이면 슬라이딩... 아직 필요한게 하나 더 있지만 차근 차근 해나가 볼랍니다... 고니님! 화우딩~~~!
하나 더 필요하다는게 뭔지 물어봐도 될까요?
지금 TODO 리스트에 올려져있는 것만도 상당하지만 그냥 단순한 호기심에... -_-;;
ㅡㅡ; 위의글, 쓰고 나서 제가 제 자신을 보고 얼마나 기가막혔던지 배를 잡고 웃었네요... ^^;
스타일 "menu"에 "cursor:pointer;" 추가 해주면 좋겠네요. 왠지 손모양이 안생기면 이상해서...^^;;
와! 간결하고 멋지네요!
저도 잘 쓸게요~
그리고.. 이 라이브러리에 대한 제안인데요~~
setTimeOut이라는 놈이.. 상당한 부담인고로..
이전 slide된 놈의 id를 들고있어서 동시에 2개의 setTimeOut이 실행되지 않고..
setTimeOut으로 불릴 function이 더 simple한 코드로 분리되면 좋지 않을까.. 싶습니다.
언제나 정력적이신 모습.. 멋져요~~ -_-bb
Tenshi// 아... 그 생각을 못했네요. 그저 작동하게만 만들어보자는 생각에... (부끄~) 근데 실제로 쓰이는 코드들이 공통적으로 쓰이는 것또한 적지 않아서 말이죠. ^^;;
일단은 차차 시간나면 다시 검토해보도록 하겠습니다.
※ 올리버네의 링크블로그에 이 글을 다음과 같이 링크했습니다 : 행복한 고니님의 소스. 무엇보다 크로스 브라우징이 된다는 것이 맘에 드는군. 감사합니다 🙂
※ 코코모의 링크블로그에 이 글을 다음과 같이 링크했습니다 : 멋진 팁입니다. 고맙게 쓰겠네요~