[IE4, IE5 용 Ver1.1] / [NN4 용 Ver1.1]

/***************************************************
	Tool Bar Version 1.1 (99/10/08)
	Yongsuk Lee (spacekan@chollian.net)
	(http://user.chollian.net/~spacekan/)
****************************************************/
menuStyle = ''
	+ '<style>'
	+ '.noLine { text-decoration:none; font-weight:bold; color:black}'
	+ '#M1, #M2, #M3, #M4 { ' // 상위 매뉴
		+ 'position:absolute; top:0px; left:0px; width:50px; border:outset 2px white; '
		+ 'background-color: lightblue; font-size: 9pt; '
		+ 'font-weight:bold; padding:2px; text-align: center;  }'
	+ '#M1 { width:150px; left:0px; }'
	+ '#M2 { width:120px; left:150px; }'
	+ '#M3 { width:120px; left:270px; }'
	+ '#M4 { width:50px; left:390px; }'
	
	+ '#S1, #S2, #S3, #S4 { ' // 하위 매뉴
		+ 'position:absolute; top:40; left:300; width:100; visibility:hidden; border:outset 2px white; '
		+ 'background-color: lightblue; font-size: 9pt; line-height:12pt; padding:10px; }'
	+ '#S1 {width:200; left:0px;}'
	+ '#S2 {width:170; left:150px; }'
	+ '#S3 {width:170; left:270px; }'
	+ '#S4 {width:100; left:390px; }'
	+ '</style>';

menuLayout = ''
	+ '<span id=M1>Tool Bar Ver 1.0</span>'
	+ '<span id=M2>NN4 사용법</span>'
	+ '<span id=M3>IE4 사용법</span>'
	+ '<span id=M4>문제점</span>';

subMenuLayout = ''
+ '<div id=S1>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="toolBar10.htm">Tool Bar Ver 1.0</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="toolBarWork.htm">ToolBar Ver 1.0 동작 방식</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="toolBar10Base.htm">기본 페이지</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="../toolBar.htm">../</a><br>'
+ '</div>'
+ '<div id=S2>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="nn4MakeToolBar.htm">Tool Bar 만들기</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="nn4Pos.htm">배치하기</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="">style과 html 작성하기</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="">script 수정하기</a><br>'
+ '</div>'
+ '<div id=S3>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="ie4MakeToolBar.htm">Tool Bar 만들기</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="ie4Pos.htm">배치하기</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="">style과 html 작성하기</a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href="">script 수정하기</a><br>'
+ '</div>'
+ '<div id=S4>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href=""><img src="../images/n4.gif" border=0><img src="../images/n4.gif" border=0><img src="../images/n4.gif" border=0></a><br>'
	+ '<a class=noLine onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'black\'" href=""><img src="../images/e4.gif" border=0><img src="../images/e4.gif" border=0><img src="../images/e4.gif" border=0></a><br>'
+ '</div>';

function menuOver() {
 	if( this.son != subLayerOn && subLayerOn) subLayerOn.style.visibility="hidden" 
	this.style.color = "red"
	this.son.style.visibility="visible"
}
function menuOut() { 
	subLayerOn = this.son; 
	this.style.color = "black"
}
function subOn() {
	clearTimeout(sub_ID)
}
function subOut() {
	sub_ID = setTimeout("subLayerOn.style.visibility='hidden'", 1)
}
function displayMenu() {
	if(!document.all) return
	var menuLayer, subLayer
	var firstPos = 0 
	for(var i=1; i<5; i++) {
		menuLayer = document.all["M"+i]
		subLayer = document.all["S"+i]
			
		menuLayer.onmouseover=menuOver
		menuLayer.onmouseout=menuOut
		menuLayer.son=subLayer
		
		subLayer.onmouseover = subOn
		subLayer.onmouseout = subOut 

		menuLayer.style.pixelLeft = firstPos
		menuLayer.style.pixelTop = document.body.scrollTop
		firstPos += menuLayer.offsetWidth
		
		subLayer.style.pixelTop = menuLayer.style.pixelTop + menuLayer.offsetHeight -1
		subLayer.style.pixelLeft = menuLayer.style.pixelLeft
	}
}

function fixMenu() {
	var menuLayer, subLayer
	var topPos = document.body.scrollTop
	for(var i=1; i<5; i++) {
		menuLayer = document.all["M"+i]
		subLayer = document.all["S"+i]
		
		menuLayer.style.pixelTop = topPos
		subLayer.style.pixelTop = topPos + menuLayer.offsetHeight
	}
}
window.onscroll = fixMenu

subLayerOn=sub_ID=null
document.write(menuStyle)
document.write(menuLayout)
document.write(subMenuLayout)
displayMenu()

[전체 구문 보기]

function fixMenu() {
	var menuLayer, subLayer
	var topPos = document.body.scrollTop
	for(var i=1; i<5; i++) {
		menuLayer = document.all["M"+i]
		subLayer = document.all["S"+i]
		
		menuLayer.style.pixelTop = topPos
		subLayer.style.pixelTop = topPos + menuLayer.offsetHeight
	}
}
window.onscroll = fixMenu

이 이벤트로 ie4, ie5를 사용하는 사용자가 이동막대를 이동시키면 지정한 함수 "fixMenu()"를 실행하여 매뉴와 하위 매뉴의 좌표를 페이지에서 이동막대가 이동한 거리를 나타내는 "document.body.scrollTop"를 지정해 줍니다. 그러면 항상 그 위치에 매뉴가 위치합니다. 수평으로 고정 시키는 것도 같이 지정해줄 수 있지만 수평으로 갱신은 별 필요가 없을 것입니다. 가능하면 페이지에 수평이동 막대는 생기지 않게 페이지를 만드니까요..

--
제 페이지에는 JavaScript 구문을 많이 예를 듭니다. 그래서 불가피하게 구문이 길어져서 수평 이동막대가 생깁니다. JavaScript 구문은 여러줄로 나누면 잘못 이해할 수 있는 경우가 많기 때문입니다. 절대로 수평 이동막대에 신경쓰지 않는 것이 아닙니다.("그렇구나.."라고 하시는 분은 막 시작하는 사람일 것입니다.. 달리 말하면 초보자요.. 맞죠........? 힘내세요.. :)

[IE4, IE5 용 Ver1.1] / [NN4 용 Ver1.1]