웹페이지의 풀다운메뉴와 트리메뉴

웹사이트를 만들면서 풀다운메뉴나 Context메뉴를 한번쯤 만들어봤을것 같다.
div로 메뉴를 구성하고 마우스이벤트를 걸어 style.display=block, style.display=none 을 적절히 구현해하면 이런한 기능을 만들어낼수 있는다.
문제는 웹화면에서 레이어가 덮지 못하는 것이 존재한다.
Window를 넘기 못한다. 브라우져의 속으로 숨는다.
<frame>을 넘지 못한다. (<iframe> 덮어진다) 화면이 프레임으로 나눠져 있을 경우 자기가 속한 페이지에서만 보이고 넘어가는 부분은 속으로 숨는다.
이런 이유로 메뉴가 content페이지에 include형태로 매번 따라다닐 것이다.
<select>를 덮지 못한다. <select>의 특성상(내용이 펴서 보여줘야함) zIndex가 높게 설계가 되어 있어서 레이어가 구멍이 생기면서 select box가 보인다.
이걸 처리하려면 레이어에 걸치는 select box를 숨겨야한다.(코딩이 만만치 않음) <object>를 덮지 못한다. ActiveX의 화면에 보여지는 부분(그래프를 보여주는 화면이나 Windows Media Player)도 그 속으로 레이어가 숨는다. 위와 같은 많은 문제를 해결하기 위해 찾던 중 괘 유용한 사이트가 존재하여 소개할까 한다. http://webfx.eae.net/dhtml/dhtmlmenu4/iemenustructure.html URL을 클릭하여 데모를 보면 select뿐만 아니라 window틀 바깥에까지 나가는 걸 볼수 있다.
위 사이트에 있는 메뉴는 정말 막강하나 메뉴디자인이 너무 윈도우프로그램 같아서 일반 웹사이트에 적용하기는 어려울것 같다.
그래서 원리만 참조하고 새로 만들어서 각자 적용해보는게 낫지 않을까 싶다.
이 사이트에서도 설명이 있는데 방법은 window.createPopup() 에 있다.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/createpopup.asp createPopup()으로 생성된 popup객체는 하나의 window객체다. (마치 window.open()으로 띄워진 새창처럼) 그래서 표시되는데 화면의 다른것에 영향을 받지 않는다. 그리고 자기 영역외의 곳을 클릭하면 자동으로 사라진다. popup객체를 이용할 경우 주의점 몇가지가 있다. 1. window.open()처럼 별도로 페이지를 둘수 없어 document.innerHTML로 내용을 세팅해줘야 한다. 2. 내용을 세팅되도 js나 css는 이미 떠 있는 상태이기 때문에 적용이 되지 않으므로 별도의 메소도로 추가시켜야한다. document.createStyleSheet('css/menu.css'); 3. 하나의 window는 하나의 popup만 가질 수 있다. window.createPopup()을 2번하면 이전 popup은 사라진다. 풀다운메뉴처럼 하위에 하위 메뉴가 나올려면 window.createPopup()로 띄운 popup객체의 window에서 createPopup()을 해야한다. 이상을 참고하여 한번 만들어보길 바란다. 그리고 webfx.eae.net 사이트의 xtree도 유용하게 사용할 수 있을것 같다. http://webfx.eae.net/dhtml/xtree/demo.html 윈도우탐색기처럼 방향키로도 탐색이 가능하며 사용법도 간단하고 script로 추가,삭제가 가능하여 메뉴외에 다른곳에도 응용할수 있을것 같다. 이외에도 다른것들 많이 있으니 한번씩 둘러보길 바란다. script로 이렇게 만들수 있다는게 대단하고 신기하기만 하다. ========================================================================= http://www.javajigi.net에서 허종진 님이 올려주신 글입니다^^ 신기하네용 ㅋㅋ 저도 개발할때 한번 써봐야겠습니다