[실행하기]

<div id=D1 style="position:absolute; width:100; top:18px; left:10px;">
	<a href="explorMenu4.htm" onClick="actionMenu(1)"
	><img src="home.gif" width=100 height=17 border=0 alt=""></a>
</div>
<div id=D1Sub style="position:absolute; width:120; top:0px; left:20px; visibility:hidden;">
<nobr><a href="#">D1 하위 링크 1</a></nobr><br> 
</div>

먼저 이벤트 부분입니다. onClick="actionMenu(1)로 click 이벤트만 지정하면 됩니다. 만약, 주매뉴를 눌렀을 때에는 문서를 불러올 필요가 없으면 onClick="actionMenu(1); return false"로 return false를 지정해 주세요. 안넣어 주어도 매뉴가 동작하는 데에는 상관없지만 페이지의 나머지 이미지 같은 내용이 출력이 끝나지 않았을 때에는 이미지를 가져오지 못합니다.

그리고 하나 더 바뀐 내용은 각 style을 지정하는 방식입니다. style="position:absolute; width:100; top:18px; left:10px;"는 각 style을 직접 넣어서 사용합니다. 전 예제들에서 <STYLE> 택으로 지정하던 방식을 각 택에 직접 style=".."로 inline으로 넣어 줍니다. 전 예제들에서 <STYLE> 택으로 지정하던 방식은 ie5의 문제를 해결하기 위해서 입니다. ie5에서는 <STYLE> 택으로 지정한 레이어의 좌표가 정상적인 동작을 하지 않는 버그가 있습니다. 그래서 JavaScript로 일일이 다시한번 더 style로 지정한 좌표를 지정해 주면 정상적으로 동작합니다. 이것을 한 부분이 전 예제들의 아래 구문의 굵은 글자들입니다.

function init() {
	if( !(n4 || e4) ) { return }
	if(document.all) {
		for(var i=1; i < =12; i++) { 
			document.all["D"+i].style.posTop = 18 + (i-1) *20
		}
	}
	liMenu()
	loaded = true
}

레이어의 좌표값을 한번 더 지정하는 이 부분도 초보자들은 잘 몰라서 문의를 하는 경우가 많아서 이렇게 inline으로 지정했습니다. 각 주매뉴들에 원하는 좌표값을 직접 지정해 주세요. 하지만, 모든 style은 <STYLE>택으로 지정하는 것이 제 경험상 더 안전합니다. 이렇게 지정했을 때의 init() 함수는 아래입니다.

function init() {
	if( !(n4 || e4) ) { return }
	liMenu()
	loaded = true
}

하위 매뉴들은 상위 매뉴의 좌표와 연계하여 동작하기 때문에 아무런 좌표값을 지정하면 됩니다. left:0; top:0 로 지정하면 됩니다. top 값은 자동으로 주 매뉴에 맞는 좌표로 배치됩니다. 그래서 top:100px; 로 지정하나 top:0px로 지정하나 동작하는 식은 같습니다. left 값은 원하는 값을 지정하세요..

이외의 나머지 사항은 앞 페이지의 "추가예제 3"의 사용법과 같습니다.

[T O P]