[JS:자작] 슬라이딩 메뉴

슬라이딩 메뉴를 구현해주는 자바스크립트이다.
왜 만들었냐…. 하면, 하나쯤 있으면 좋을 것 같아서. -_-;; 언젠간 쓸 때가 있지 않을까?

간단하게 해당 자바스크립트를 본문에 포함한 후에 해당 서브메뉴의 아이디를 지정해주면 된다.

...

메인메뉴
서브메뉴1
서브메뉴2
서브메뉴3


서브메뉴를 둘러싼 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)

  1. 안녕하세요. 블루비 웹사이트에서 고니님 소스를 얻었어요. 지금 사이트를 만드는 중인데, 메뉴를 클릭했을 때 서브메뉴가 펼쳐진 상태로 이동할 수 없을까 3일째 고민중이었습니다.
    오늘 이 포스트 찾고 윗 분의 질문에 대한 고니님의 답변(slide(‘sub3’) )에 힌트를 얻어 어찌어찌 아쉬우나마 해결이 되긴 되었는데.. 이거 모든 페이지에 각각 넣어주자니 영 찜찜하네요. 메뉴부분이 asp로 include되었는데 이 안에서 해결할 방법은 없을까요?

    스크립트를 짜거나 수정할 만한 능력은 안 되어서 여러 사이트 돌아다니며 적합한 소스를 찾아봤는데 고니님 소스만한 것이 없네요. 크로스 브라우징 되고 소스도 정말 짧고.. 어쨌든 답변 못 주셔도 고맙단 말씀 드리려 왔습니다.

    신혼여행중이신가봐요. 즐거운 시간 보내시길 바랍니다.

  2. ㅎㅎ;;; 슬라이드 속도는 어떻게 잡았네요
    var H, step = 5; << 여기에 숫자만 높게 바꿔주고 서브메뉴숫자를 짝수로 맞추면 해결은 되더군요…..이런게 편법인가 ;;

    서브메뉴 이동한 상태에서 슬라이드 메뉴 해당 서브버튼이 펼쳐진 상태로 유지할수 있는 방법좀 알려주세요.

  3. 슬라이드 되는 속도는 어떻게 올리저…?
    var H, step = 5; 이부분에서 숫자 5를 그 이상으로 잡아주면 속도는 올라가던데 서브메뉴 밑에 여백이 올린 수만큼 벌어지더군요.
    속도만 별도로 올릴수 있는방법은 없을까요.
    또 서브메뉴 클릭시 그 서브메뉴에서 해당 메뉴가 펼쳐진 상태로 유지할수는 없을까요.
    자세히좀 알려주세요 부탁드립니다.

  4. 이동한 페이지 마지막쯤에서 slide('sub3') 과 같이 한번 실행해주면 될 것 같습니다. 페이지가 이동한 후에 스르륵 펼쳐져서 플래시 같이 보일 수도… ^^
    ————-
    조금만 더 자세히 알려주실수 있나요?
    davidcho530@gmail.com
    어디에 실행을 해야하는지…모르겠습니다

  5. 이동한 페이지 마지막쯤에서 slide('sub3') 과 같이 한번 실행해주면 될 것 같습니다. 페이지가 이동한 후에 스르륵 펼쳐져서 플래시 같이 보일 수도… ^^

  6. 이 슬라디딩 메뉴를 사용할려고 하는데…
    슬라이딩 된 후 서브메뉴를 클릭하여 페이지 이동후
    펼쳐진 상태로 계속 유지하게 하는 방법이 있는지요?

  7. 감사합니다. 그런 이유가 있었군요.
    전 6.0를 쓰는데 다른 분이 5.0을 쓰고 있었나 봅니다.
    다른 컴에서는 잘 되던데 그 분 컴에서는 오류가 뜨더군요. 감사합니다.

  8. 엄밀히 말해서 undefined 와 null 은 다른 겁니다.
    a 라는 변수가 있고 그 값이 null 이 될 수 있는 거지만 undefined 는
    a 라는 변수가 아예 선언되지 않았다는 뜻이거든요.

    그 부분이 문제가 된다면 typeof to == "undefined" 로 해주세요.
    근데 익스플로러 5.0 버전 쓰세요?

Leave a Reply