평범한 사이트맵은 싫다!!! (플래시 같은 사이트맵 꾸미기)

http://oxtag.com/html/ex/sitemap_ex.html

소스는 미리보기를 클릭하시고 소스보기 하시면 되구요.
미리보기에서 새창의 크기가 자신이 열었던 마지막 윈도우 크기로 열리니까
다시 리로드하세요. 창의 크기에 따라서 중심점이 한 가운데로 오기 때문에
작을 경우는 모양이 이상합니다.

설명은 아래 걸 보심 됨니다.

메뉴에서 하위 메뉴가 없을 경우.
menu.addItem("메뉴","window.open('파일경로')"); 이렇게 됨니다.
메뉴에서 하위 메뉴가 있을 경우.
menu.addItem("메뉴","toggle");
하위 메뉴에서 처리.
menu.subMenus[번호].subMenus[번호].addItem("메뉴의 하위 메뉴","window.open('파일경로')");

이 메뉴의 번호는 주메뉴든 하위메뉴든 처음(차례대로) 초기 값은 0입니다. 위 번호 부분.
주메뉴에서 하위 메뉴가 없는 것은 별 어려움이 없으니까 그냥 넘어가구요.
하위 메뉴가 있는 것을 설명하겠습니다.
예제의 주 메뉴는 모두 5개로 이루어져 있습니다.
서브메뉴가 있는 것은 "서브 메뉴 4" 와 "서브 메뉴 5"입니다.
여기서 5번을 예로 들겠습니다. 원래는 6번째 메뉴죠.
하지만 초기 값이 0이니까 0,1,2,3,4,5 이렇게 6개가 되는거죠.


// 서브 메뉴 5 시작
menu.addItem("PDS","toggle");
menu.subMenus[5].addItem("Pds 1","toggle");
menu.subMenus[5].addItem("Pds 2","window.open('파일경로')");
// pds 1의 하위 메뉴
menu.subMenus[5].subMenus[0].addItem("유틸","window.open('파일경로')");
menu.subMenus[5].subMenus[0].addItem("폰트","window.open('파일경로')");
menu.subMenus[5].subMenus[0].addItem("이미지","window.open('파일경로')");
menu.subMenus[5].subMenus[0].addItem("기타","window.open('파일경로')");
// 서브 메뉴 5 끝

이걸 보시면 어느정도 이해가 갈겁니다.
menu.addItem("PDS","toggle"); 이건 메뉴의 시작 점입니다. toggle은 숨겨진 것이 있다는 뜻... 맞나..-_-;
그 담에 pds 메뉴에 pds1과 pds2가 있다는 것이고 여기서 메뉴가 많다면 늘리면 되겠죠.
menu.subMenus[5].addItem("Pds 1","toggle");
menu.subMenus[5].addItem("Pds 2","window.open('파일경로')");
중요한 점은 숫자입니다.
첫번째 숫자는 위에서 초기 값이 0이니까 6번째 메뉴(PDS)는 5가 되겠죠.
그래서 이 메뉴의 숫자가 5가 된 것입니다.
그리고 두번째 0은 하위 메뉴인 pds1과 pds2 두개인데 toggle가 있는 pds1이 먼저 쓰였으니까
초기 시작 값인 0이 되는 거구요. 만약 pds2에 하위메뉴를 만들 경우는 1이되겠죠.

참고..
현재 창에 띄우기 - window.open('파일경로','_self');
특정 프레임에 띄우고 싶으시면 _self 대신 프레임명을 넣으세요.