슬라이딩 메뉴를 구현해주는 자바스크립트이다.
왜 만들었냐.... 하면, 하나쯤 있으면 좋을 것 같아서. -_-;; 언젠간 쓸 때가 있지 않을까?
간단하게 해당 자바스크립트를 본문에 포함한 후에 해당 서브메뉴의 아이디를 지정해주면 된다.
...
서브메뉴를 둘러싼 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)
오호라~
행복한 고니님의 블로그로 이동
위의 링크를 따라가면 깔끔하게 정리된 설명이 있다. +_+
보고 잘따라 해보자 +_+
난 언제 저래보나. ㅠ_ㅠ
슬라이딩메뉴.zip (1.3 KB)
안냐세여~
하두 급해서 질문올려요 ^^;; 도대체 기억이 나질 않네요.. 아무리 이것저것
방법으루 해봐두 안되서 ^^ 도움 요청함다..
onClick="javascript:updateButton_Clicked('<%=aa1%>','<%=aa2%>','<%=aa3%>','<%=aa4%>','<%=aa5%>','<%=aa6%>','<%=aa7%>','<%=aa8%>','<%=aa9%>','<%=aa10%>','<%=aa11%>','<%=aa12%>')">
여기서 .. 변수 끝에서 3번째 놈이 가진 값들이 많아 지가 줄바꿈을 하드라구여..
근데 이때 .. 저위처럼 쓰니까 애러가 나욤 종결되지 않은 문자열 상수..
라구요.. 제생각엔.. n 이런걸 어디다 써 주면 될듯한데.. 잘 안되네여
답변 부탁드려욤^^
행복이고니2// 무슨 말씀이신지 이해가 잘 안되는데요... -_-a
아마도 변수의 내용중에 줄바꿈문자가 들어있는 경우인것 같은데요...
문자열 치환을 이용해서 n 을 없애주거나 \n 으로 바꿔주셔야 할 것 같습니다.
어헝..글을 남길 때가 마땅치 않아서 여기다 질문을 합니다 ㅜ.ㅜ
---
test
removeChild
---
이거요. 파폭에서는 되는데 익스에선 안됩니다. 이런 경우는 첨이네요.
appendChild 가 표준에 맞지 않게 된건지... UL 에서 LI 객체 추가는 잘 되는데(익스에서도), 요상하게도 테이블의 TD 객체만 추가가 안됩니다(화면상 변화가 없음). 제 환경은 XP+SP2 입니다. 근데 파폭에서는 그 반대입니다. appendChild 는 동작하는데, 이놈이 웃기게도 removeChild 는 안됩니다.
아니 이럴 수갓... -_-!
자바스크립트 문의할만한데가 젤 첨 생각나는게 여기였네요 ^^;;
appendChild 가 안되는 건... 좀 이상한데요... ㅡ.ㅡa
불여우에서 removeChild 가 안되는건 아마도 children 때문일 겁니다. 불여우라면 Javascript Console 이 있으니까 메시지 확인하면서 하시면 될 것 같습니다.
콘솔로 어케해야 할지를 모르겠어요 ㅜ.ㅜ
그냥 document.getElementById('tmp') 로 조회하면 null 이라고 나오고..현재 열린 문서에 해당하지 않는 모양이군요.
dOM 인스펙터는 너무 자세하게 나와서 완죤 혼란;; 어디가 어딘지 모르겠더군요. slbling 이거나 attribute 같은 쪽은 진짜 넘 복잡해서 매번 보기도 싫어집니다. 언제 한 번 개념을 확실히 잡긴 해야 하는데.. 한글로 쉽게 설명된 사이트는 절대 없고.. msdn 은 복잡하고.. 난관이군요 -_-
p.s
구현하려고 하는 건, 리스트 뷰 입니다. SysListView32 에 SysHeader32 라는 객체가 있는데 보통 탐색기에서 상단에 필드별 출력할 때 쓰는 겁니다. 이걸 웹상에서 끌어쓸 수가 없는 거 같길래, 그냥 만들려구요. 어디 만들어진 게 있을 법도 한데..-_-; textarea 로는 필드별 정렬이 안되잖아요.
찾고 또 찾던 소스인데..감사합니다...^^
근데 마우스 클릭할때 하위메뉴가 열리는게 아니라 마우스를 올리면 메뉴가 열리고 다시 떼면 닫히도록 할려면 어떻게 소스를 수정해야할까요?
스크립트에 문외한이라 하나도 모르겠습니다..
아무리 수정할려구해두 도저히 안되서 질문 드립니다...
마우스 온-오프로 스르륵~이 되도록 해 주시면 안될까요? 그렇게만 되면 완벽한데....ㅠㅠ
onClick를 onmouseover로 바꾸니까 끝이네요....에구 부끄러워라....^^;;;;;;